本文深入探讨 next.js `app` 路由中 `page.tsx` 组件在构建时出现的“无效默认导出”类型错误。核心原因是 `page.tsx` 的默认导出只能接受 next.js 提供的 `params` 和 `searchparams`。教程将指导您如何将带有自定义 props 的页面组件重构为普通组件，并在 `page.tsx` 中正确使用，从而解决构建失败问题并优化组件结构。
在 Next.js 的 app 路由目录结构中，page.tsx 和 layout.tsx 文件扮演着特殊的角色。它们不仅仅是普通的 React 组件，更是 Next.js 框架用于路由匹配和页面渲染的核心入口。因此，这些文件的默认导出（default export）必须遵循 Next.js 设定的严格类型签名。
一个常见的误解是，可以在 page.tsx 的默认导出中像普通 React 组件一样直接定义和接收自定义 props。虽然在开发模式下（npm run dev）这种做法可能不会立即报错，但在生产构建阶段（npm run build）通常会导致类型错误，提示“Page "..." has an invalid "default" export”。
当您尝试在 app 目录下的 page.tsx 中定义自定义 props，例如：
// app/signup/page.tsx (错误示例)
export default function SignupPage({mode = 'patient'} : {mode: 'patient' | 'doctor'}) {
// 注册页面的具体逻辑
}在执行 npm run build 时，您会遇到类似以下的编译错误：
Type error: Page "app/signup/page.tsx" has an invalid "default" export:
Type "{ mode: "patient" | "doctor"; }" is not valid.这个错误明确指出，page.tsx 的默认导出所接受的类型 { mode: "patient" | "doctor"; } 是无效的。其根本原因在于 Next.js 框架对 page.tsx 的默认导出有严格的约定：它只期望接收由框架在运行时自动注入的特定 props，即 params 和 searchParams。任何其他自定义 props 都将被视为无效。
为了避免上述类型错误，page.tsx 和 layout.tsx 的默认导出必须遵循 Next.js 官方文档中定义的标准接口。
page.tsx 组件的默认导出可以接收 params 和 searchParams 这两个 props。
// page.tsx 的正确类型签名示例
interface PageProps {
params: { [key: string]: string | string[] | undefined }; // 动态路由参数
searchParams: { [key: string]: string | string[] | undefined }; // URL 查询参数
}
export default function Page({ params, searchParams }: PageProps) {
// 在这里可以使用 params 和 searchParams
// 例如：const postId = params.slug;
// const queryParam = searchParams.get('someKey');
return (
<div>
<h1>页面内容</h1>
{/* ... */}
</div>
);
}layout.tsx 组件的默认导出主要接收 children prop，用于渲染其内部的页面或嵌套布局。
// layout.tsx 的正确类型签名示例
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body>
{/* 布局结构 */}
<header>导航栏</header>
<main>{children}</main> {/* 渲染子内容 */}
<footer>页脚</footer>
</body>
</html>
);
}解决“无效默认导出”错误的最佳实践是将需要自定义 props 的逻辑从 page.tsx 中分离出来，封装成一个普通的 React 组件，然后在 page.tsx 中导入并渲染该普通组件。
首先，将原来 page.tsx 中包含自定义 props 的逻辑提取到一个新的文件，例如 components/SignupForm.tsx。在这个新组件中，您可以自由地定义和接收任何自定义 props。
// components/SignupForm.tsx
import React from 'react';
interface SignupFormProps {
mode?: 'patient' | 'doctor'; // 定义自定义 props
// 可以根据需要添加其他 props
}
export default function SignupForm({ mode = 'patient' }: SignupFormProps) {
// 注册页面的具体逻辑，例如表单、状态管理等
return (
<div>
<h1>{mode === 'patient' ? '患者注册' : '医生注册'}</h1>
<form>
{/* 注册表单字段 */}
<input type="text" placeholder="用户名" />
<button type="submit">注册</button>
</form>
</div>
);
}接下来，修改 app/signup/page.tsx，使其遵循 Next.js 的类型约定，并导入您刚刚创建的 SignupForm 组件。
示例 1：直接传递固定 props
如果 mode 值是固定的或者在 page.tsx 内部确定，可以直接传递。
// app/signup/page.tsx (使用普通组件)
import SignupForm from '@/components/SignupForm'; // 假设路径为 @/components/SignupForm
// page.tsx 遵循 Next.js 约定，不接收自定义 props
export default function SignupPage() {
return (
// 在这里渲染 SignupForm，并传递所需的 props
<SignupForm mode="patient" />
);
}示例 2：根据 URL searchParams 动态传递 props
如果 mode 需要根据 URL 中的查询参数来决定，可以在 page.tsx 中利用 searchParams 获取该值，然后传递给 SignupForm。
// app/signup/page.tsx (根据 URL searchParams 动态传递 mode)
import SignupForm from '@/components/SignupForm';
interface SignupPageProps {
// page.tsx 接收 Next.js 提供的 searchParams
searchParams: { [key: string]: string | string[] | undefined };
}
export default function SignupPage({ searchParams }: SignupPageProps) {
// 根据 searchParams 的值来决定 mode
const mode = searchParams.mode === 'doctor' ? 'doctor' : 'patient';
return (
<SignupForm mode={mode} />
);
}通过这种方式，page.tsx 保持了其作为 Next.js 页面入口的纯粹性，遵循了框架的类型约定，而业务逻辑和自定义 props 的处理则交给了普通的 React 组件，从而解决了构建时的类型错误。
通过采纳这些实践，您可以有效地解决 Next.js app 路由中 page.tsx 的无效默认导出类型错误，并构建出更加健壮和可维护的 Next.js 应用。
以上就是解决 Next.js app 路由中 page.tsx 的无效默认导出类型错误的详细内容，更多请关注php中文网其它相关文章！
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
458
收藏
