Next.js 14.1.0构建时出现类型错误的原因是什么？

错误信息回顾 #

Type error: Type 'OmitWithTag<typeof
import("{omitted}/src/app/{omitted}/page"), "default" | "metadata" |
"config" | "generateStaticParams" | "revalidate" | "dynamic" | ... 7
more ... | "generateViewport", "">' does not satisfy the constraint '{
[x: string]: never; }'.   **Property 'SingleDatePicker' is
incompatible with index signature**.
    **Type** '({ name, value, label, minDate, maxDate, className, state, disabled, onChange }: { name: keyof InsertBidFormData; value?:
DateType | undefined; label: string; minDate?: Date | undefined;
maxDate?: Date | undefined; className?: { input?: string | undefined;
} | undefined; state?: BidFormState | undefined; disabled?: ...' **is
not assignable to type 'never'**.

问题代码 #

'use client'
//... imports
export default function Page() {
  //hooks and props
  return (
    <form>
      <SingleDatePicker name={'date'} ...props />
    </form>
  )
}

export const SingleDatePicker = (props: Props) => {
  //whatever
}

错误成因 #

这个错误的核心是违反了Next.js App Router对page.tsx文件的导出规则：

Next.js 13+的App Router体系中，page.tsx作为路由页面的专属文件，只允许导出官方明确指定的内容，包括：

• 默认导出的页面组件（export default function Page()）
• 路由配置项：metadata/generateMetadata、config、revalidate、dynamic等
• 静态生成/视图相关API：generateStaticParams、generateViewport等

而你在同一个page.tsx文件中额外导出了自定义的SingleDatePicker组件，这超出了允许的导出范围。TypeScript会按照App Router的内置类型约束（要求page文件的导出除了官方允许项外不能有其他内容，即符合{ [x: string]: never }）进行检查，发现额外的SingleDatePicker属性无法匹配never类型，因此抛出类型错误。

解决方法很简单：把SingleDatePicker组件移到单独的组件文件（比如components/SingleDatePicker.tsx）中，然后在page.tsx里导入使用即可。

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