类型错误：页面“...”具有无效的“默认”导出：类型“...”在 Next.js 中无效

Question

我有一个用于注册页面的功能组件。我正在尝试为该组件声明 props，以便我可以从另一个组件向其传递适当的值。这就是我正在做的：

export default function SignupPage({mode = 'patient'} : {mode: 'patient' | 'doctor'}) {
 {/* CODE FOR SIGNUP PAGE HERE */}
}

正如代码所示，我希望 的默认mode值为patient。它应该始终是 或patient之一doctor。

当我使用 运行此代码时npm run dev，一切正常。当我尝试使用 构建时npm run build，我收到以下错误：

- info Linting and checking validity of types ...Failed to compile.

app/signup/page.tsx
Type error: Page "app/signup/page.tsx" has an invalid "default" export:
  Type "{ mode: "patient" | "doctor"; }" is not valid.

我已经尝试了多种方法，例如声明interfaceand typewith mode: 'patient' | 'doctor';。它总是给出相同的错误。

任何帮助和指导将不胜感激

Answer 1

正如您在doc上所读到的，目录page.tsx中a 的默认导出app只能具有类似于以下的类型：

interface PageProps {
  params: { slug: string };
  searchParams: { [key: string]: string | string[] | undefined };
}
export default function Page({ params, searchParams }: PageProps) {
 // ...
}

params和searchParams是您可以提供的唯一类型，这些类型将由 Next.js 传递给您的组件。您不应该尝试在另一个组件中自己调用该页面。

如果您想要这样，您应该将其转换为普通组件，并且可能将其移动到自己的文件中，然后从那里将其导入到您想要的任何位置。