NextJS 14异步服务端组件应使用何种类型替代NextPage/FunctionComponent？

在Next.js 14的App Router模式下，异步服务端组件无法使用传统的NextPage或FunctionComponent类型——这两个类型要求组件返回同步的ReactElement，而异步组件返回的是Promise<JSX.Element>，因此会触发类型错误。以下是具体的替代方案：

1. 页面组件（Page Components） #

对于App Router中的页面组件，无需显式标注类型，TypeScript会自动推断异步组件的类型。如果一定要手动指定类型，可以直接使用() => Promise<JSX.Element>：

// 推荐写法：自动推断类型
export default async function MyPage() {
  const userCredit = await getCredit(user.id);
  return <div>用户积分：{userCredit}</div>;
}

// 手动指定类型的写法
const MyPage: () => Promise<JSX.Element> = async () => {
  const userCredit = await getCredit(user.id);
  return <div>用户积分：{userCredit}</div>;
};
export default MyPage;

2. 自定义异步组件 #

对于自定义的异步服务端组件，可以自己定义一个异步组件类型，替代FunctionComponent：

// 定义通用异步组件类型
type AsyncFunctionComponent<P = {}> = (props: P) => Promise<JSX.Element>;

// 组件Props定义
type HeaderProps = {
  handleSidebarOpen: () => void;
};

// 使用自定义类型标注组件
export const Header: AsyncFunctionComponent<HeaderProps> = async ({ handleSidebarOpen }) => {
  const user = useUserSession();
  const userCredit = await getCredit(user.id);
  return (
    <header>
      <button onClick={handleSidebarOpen}>菜单</button>
      <span>当前积分：{userCredit}</span>
    </header>
  );
};

关键说明 #

• NextPage是Pages Router时代的专属类型，App Router下的页面组件不再依赖该类型，异步页面直接用async function定义即可。
• FunctionComponent（或React.FC）本质是同步组件类型，不支持返回Promise，因此必须用自定义的异步组件类型替代。

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