Can't Access Document ID Inside a Custom Server Component

[tobiasiv]

Link to reproduction

No response

Payload Version

3.0.0-beta.67

Node Version

20.9.0

Next.js Version

15.0.0-canary.58

Describe the Bug

Currently, when using a custom server component inside a UI field, it's not possible to access the ID of a document. The only workaround is to use a client component. Accessing the document ID server side would be beneficial for fetching initial data and improving initial loading speed.

Reproduction Steps

Log the props of a custom server component inside a UI field.
You get the following props:

{
  AfterInput: null,
  BeforeInput: null,
  CustomDescription: undefined,
  CustomError: undefined,
  CustomLabel: undefined,
  custom: undefined,
  descriptionProps: { description: undefined },
  disabled: false,
  errorProps: { path: '' },
  label: 'Offers',
  path: '',
  required: undefined,
  i18n: {
    ...
  },
  payload: {
    ...
  }
}

But none of these props include the current document ID.

Adapters and Plugins

No response

[jmikrut]

Hey @tobiasiv — unfortunately this is a side-effect of React Server Components and not Payload's implementation.

Due to the recursive, drawer-based UI of an editor like Payload, we need to render custom components a single time on the server. They are not re-rendered. Imagine opening an "edit drawer" in Payload—that is a client-side action, which would render your custom component and the ID would need to be the ID of the document that was rendered.

So you can imagine that as you navigate the admin panel, your id could change based on which document(s) you open.

For this reason, if you want to access the ID of the document, you'd need to use a client component.

At least for now.

In the future, if React / Next.js introduced a way to request new server components upon a client action (the opening of a drawer or similar) we could add more props into the mix.

We went down about 1 million rabbit holes to discover this and I think unfortunately there's not much that can be done as of now. But I'll tag this as a Feature Request so we can keep it on the radar and hopefully improve this logic at some point based on React / Next.js features becoming available!

[tobiasiv]

Hey @jmikrut - I understand, thank you for the detailed explanation!