Next 13客户端与异步服务端组件结合出现类型错误求助

问题根源 #

你的ServerPage是异步服务端组件（用async function定义），返回值类型是Promise<JSX.Element>，但ClientPage中children的类型被定义为React.ReactNode——这个TS类型并不包含Promise类型，所以触发类型错误。Next.js运行时能正确处理这种嵌套，但TS类型系统没识别到服务端组件的异步特性。

解决方法 #

调整ClientPage的children类型，兼容异步服务端组件的返回值：

修改clientPage.tsx的类型定义：

'use client';

import type { ReactNode } from 'react';

export default function ClientPage({
  children,
}: {
  children: ReactNode | Promise<ReactNode>;
}) {
  console.log('rendering client page');
  return <>{children}</>;
}

如果想要更贴合Next.js的类型体系，也可以结合PropsWithChildren扩展类型：

'use client';

import type { PropsWithChildren } from 'react';

type ClientPageProps = PropsWithChildren<{}> & {
  children?: React.ReactNode | Promise<React.ReactNode>;
};

export default function ClientPage({ children }: ClientPageProps) {
  console.log('rendering client page');
  return <>{children}</>;
}

补充说明 #

调整类型后，TS会正确识别异步服务端组件作为子元素的合法性，同时不影响Next.js的运行时逻辑——服务端组件依然会在服务端完成数据获取和渲染，再传递给客户端组件展示。

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