Next.js 13.4.19中React Server Component调用Client子组件报错问题

问题重现 #

使用Next.js 13.4.19的App Router（启用React Server Components）时，遇到如下问题：

ClientTest.jsx（标记为Client组件）：

'use client'

export default function ClientTest() {
  return <div>ClientTest</div>
}

ClientTest.Item = function ClientTestItem() {
  return <div>ClientTest.Item</div>
}

page.jsx（Server Component）：

import ClientTest from './ClientTest'

export default function Page() {
  // ClientTest.Item 为 undefined，报错：Unsupported Server Component type: undefined
  return <ClientTest.Item />
}

主组件<ClientTest />可正常渲染，但挂载在其下的附属子组件<ClientTest.Item />在Server Component中访问时为undefined。

原因分析 #

这是React Server Components + Next.js的当前实现限制，并非bug。

带有'use client'指令的模块，在Server Component中导入时，Next.js会进行特殊隔离处理：Server环境仅能识别并代理模块的默认导出，挂载在默认导出对象上的附属属性/子组件不会被保留。这是为了严格区分Server与Client组件的边界，避免Server端意外执行Client代码。

解决方案 #

方案1：将子组件作为独立导出 #

修改Client组件模块，把附属子组件单独导出，确保Server Component可直接导入并识别为Client组件：

// ClientTest.jsx
'use client'

export default function ClientTest() {
  return <div>ClientTest</div>
}

// 单独导出子组件
export function ClientTestItem() {
  return <div>ClientTest.Item</div>
}

在Server Component中导入使用：

// page.jsx
import { ClientTestItem } from './ClientTest'

export default function Page() {
  return <ClientTestItem />
}

方案2：使用Client包装组件 #

创建专用的Client组件来渲染附属子组件，再在Server Component中调用该包装组件：

// ClientTestItemWrapper.jsx
'use client'
import ClientTest from './ClientTest'

export default function ClientTestItemWrapper() {
  return <ClientTest.Item />
}

在Server Component中使用：

// page.jsx
import ClientTestItemWrapper from './ClientTestItemWrapper'

export default function Page() {
  return <ClientTestItemWrapper />
}

针对组件库开发的建议 #

由于这是当前Server Components的实现限制（属于边界隔离的设计逻辑，暂未在React官方文档明确标注），若你的组件库大量使用“主组件挂载子组件”模式，建议调整架构：

• 优先采用独立导出每个组件的模式，避免依赖主组件的附属属性
• 若需保留命名空间，可导出包含所有子组件的聚合对象，但需明确告知用户该对象仅能在Client组件中使用，或提供对应的包装组件供Server Component调用
• 为每个子组件单独创建文件，同时提供带有'use client'的聚合导出入口，兼顾使用体验与Server Components兼容性

内容的提问来源于stack exchange，提问作者xec