Next.js app目录page.tsx默认导出类型错误怎么解决

在 Next.js 的 app 目录中，page.tsx 文件用于定义路由页面，其默认导出必须是一个符合 Next.js 类型约束的 React 组件。当 TypeScript 报出默认导出类型错误时，通常是因为函数签名、返回值或元数据定义不符合框架预期。

常见错误表现

开发者经常遇到如下几类类型错误：

• 默认导出不是有效的 React 组件函数
• 页面组件返回了不支持的类型，例如直接返回字符串
• 使用了错误的方式定义 metadata 导致类型不匹配

错误示例代码

下面这段代码会触发类型错误，因为默认导出函数的返回值类型不被 Next.js 接受，且未正确使用内置类型。

// page.tsx 错误示例
export default function Page() {
  return 'hello'; // 返回字符串，不是 React 元素
}

export const metadata = {
  title: '测试',
  description: 123 // description 应为字符串
};

问题原因分析

Next.js 的 app 目录要求 page 组件的默认导出返回 React.ReactElement 或 null，而不能是普通值。同时 metadata 对象需要符合 Metadata 类型，其中的字段有严格类型限制。

正确解决方案

应当使用 Next.js 提供的类型，并确保组件返回合法的 JSX。修改后的代码如下：

// page.tsx 正确示例
import type { Metadata } from 'next';

export const metadata: Metadata = {
  title: '测试',
  description: '这是一个示例页面'
};

export default function Page() {
  return (
    <main>
      <h1>hello</h1>
    </main>
  );
}

带参数的页面组件

如果页面需要接收路由参数，应使用 PageProps 风格的类型定义，避免手动书写错误的 Props 结构。

// 带 searchParams 的页面
import type { Metadata } from 'next';

export const metadata: Metadata = {
  title: '带参数页面'
};

export default function Page({
  searchParams
}: {
  searchParams: { [key: string]: string | string[] | undefined };
}) {
  return (
    <div>
      <p>查询参数: {JSON.stringify(searchParams)}</p>
    </div>
  );
}

总结

遇到 page.tsx 默认导出类型错误时，优先检查函数返回值是否为合法 React 节点，并引入 Next.js 导出的 Metadata 等类型来约束元数据。保持类型导入和函数签名规范，可彻底消除此类编译报错。

Next.jspage_tsxTypeScript修改时间：2026-07-26 06:45:15