Next.js构建时页面默认导出类型错误问题求助

你遇到的核心问题是Next.js App Router 中的 page.tsx 组件不能像普通 React 组件那样接收自定义 props。开发模式下类型校验宽松所以没报错，但构建时 Next.js 会严格校验页面组件的导出类型，因此抛出了类型错误。

根据你的需求（mode 默认值为 patient，仅允许 patient/doctor 两个值），提供三种可行方案：

方案一：使用 URL 搜索参数（客户端切换模式） #

通过 URL 查询参数传递 mode，适合需要动态切换注册模式的场景：

'use client';
import { useSearchParams } from 'next/navigation';

export default function SignupPage() {
  const searchParams = useSearchParams();
  // 从搜索参数获取mode，默认值设为patient，同时校验类型
  const mode = (searchParams.get('mode') as 'patient' | 'doctor') || 'patient';

  // 兜底处理非法值
  if (!['patient', 'doctor'].includes(mode)) {
    return <div>无效的注册模式</div>;
  }

  {/* 页面业务逻辑 */}
  return <div>注册身份：{mode}</div>;
}

使用方式：访问 /signup（默认 patient）或 /signup?mode=doctor

方案二：使用动态路由段（固定模式路由） #

通过路由路径传递 mode，适合需要固定路由入口的场景：

1. 调整路由结构，创建 app/signup/[mode]/page.tsx
2. 编写组件代码：

import { notFound } from 'next/navigation';

type Props = {
  params: {
    mode: string;
  };
};

export default function SignupPage({ params }: Props) {
  const { mode } = params;

  // 校验mode合法性，非法值触发404
  if (mode !== 'patient' && mode !== 'doctor') {
    notFound();
  }

  {/* 页面业务逻辑 */}
  return <div>注册身份：{mode}</div>;
}

// 可选：预渲染合法路由，提升访问性能
export async function generateStaticParams() {
  return [{ mode: 'patient' }, { mode: 'doctor' }];
}

使用方式：访问 /signup/patient 或 /signup/doctor

方案三：拆分组件（从父组件传参） #

将注册页面拆分为普通组件，在路由页面中引入并传递参数，适合需要从上层组件（如 Layout）传递数据的场景：

1. 创建 components/SignupPage.tsx：

'use client';

type SignupProps = {
  mode?: 'patient' | 'doctor';
};

export default function SignupPage({ mode = 'patient' }: SignupProps) {
  {/* 页面业务逻辑 */}
  return <div>注册身份：{mode}</div>;
}

2. 在 app/signup/page.tsx 中引入：

import SignupPage from '@/components/SignupPage';

export default function SignupRoutePage() {
  // 可根据路由、服务器数据等动态确定mode
  const mode = 'patient';
  return <SignupPage mode={mode} />;
}

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