Next.js 13.4中服务端组件的类型定义疑问

嗨，我来帮你理清这个问题～你遇到的类型错误核心原因很明确：NextPage这个类型是专门给客户端组件设计的，它完全不支持异步函数的返回值，而服务端组件（也就是你现在写的这个带async/await的组件）返回的是Promise<JSX.Element>，自然和NextPage要求的同步React组件类型不匹配。

给你几个解决方案，按推荐程度排序：

1. 最省心：直接去掉类型标注 #

在Next.js 13.4的App Router模式下，服务端组件的类型会被TypeScript自动推断，完全不需要显式标注NextPage或者其他类型。你的代码可以改成这样：

const Page = async () => {
  const { products }: { products: CoffeeInterface[] } = await getData("/products")

  return (
    <main className="flex min-h-screen flex-col bg-gradient-to-t from-slate-300 via-slate-200 to-gray-200">
      <SearchCoffee />
      <div className="flex gap-10 w-full">
        <FiltersDropdown />
        <CoffeesList coffees={products} />
      </div>
    </main>
  )
}

export default Page

这样不仅不会有类型错误，代码也更简洁。

2. 非要显式标注？自定义类型或直接用返回值类型 #

如果你确实想给组件加上类型标注，也不用纠结NextPage，服务端组件本质就是一个返回Promise<JSX.Element>的函数，你可以这么写：

const Page: () => Promise<JSX.Element> = async () => {
  // ... 你的业务代码
}

不过说实话，这种标注完全是多此一举，TS的自动推断已经能准确识别类型了。

额外补充：客户端组件和服务端组件的类型区别 #

再帮你梳理下两者的类型边界：

• 客户端组件：需要加上'use client'指令，这类组件是同步执行的（如果要异步获取数据，得用SWR、React Query这类客户端数据方案），这时候你可以用NextPage或者React.FC来标注类型。
• 服务端组件：默认就是服务端组件，不需要任何指令，支持直接用async/await获取数据，不需要用NextPage类型，TS会自动处理返回值的Promise类型。

你之前看到的错误信息里提到“Promise<Element>缺少ReactElement的type、props、key”，就是因为NextPage期望组件同步返回一个React元素，而你的服务端组件返回的是一个Promise包裹的元素，类型自然对不上～

备注：内容来源于stack exchange，提问作者AnnaEG