求助：Next.js 15动态路由开发正常但构建时触发类型错误

云原生阿岚

2026-6-16

Next.js 15 动态路由构建类型错误解决方案

问题原因

Next.js 15 对 App Router 的类型系统做了严格升级，会自动为动态路由页面生成精确的参数类型。手动定义的 PageProps 接口会与自动生成的类型冲突，导致构建时触发类型不兼容错误（开发环境类型检查较宽松，因此无报错）。

解决方法

方法1：移除手动定义的接口，让 TypeScript 自动推断类型

直接删除自定义的 PageProps 接口，TypeScript 会自动识别 Next.js 生成的参数类型：

// src/app/listing/[id]/page.tsx
const Page = ({ params }) => {
  const { id } = params;
  return <div>Page for {id}</div>;
};

export default Page;

对于带 catch-all 路由的页面（src/app/[id]/[[...slug]]/page.tsx）：

const Page = async ({ params }) => {
  const { id } = params;
  // slug 会被自动推断为 string[] | undefined
  return <div>Page {id}</div>;
};

export default Page;

方法2：使用 Next.js 自动生成的类型文件

如果需要显式声明类型，可以直接导入 Next.js 自动生成的类型：

// src/app/listing/[id]/page.tsx
import type { PageProps } from './page.types';

const Page = ({ params }: PageProps) => {
  const { id } = params;
  return <div>Page for {id}</div>;
};

export default Page;

page.types 文件由 Next.js 在开发或构建时自动生成，路径对应 .next/types/app/[路由路径]/page.ts，可通过相对路径直接导入。