NextJS 15中Type不满足PageProps约束的错误解决求助

问题核心 #

Next.js 15和React 19 RC对App Router/Pages Router的PageProps类型定义做了严格限制，禁止params属性为Promise<any>类型，必须是同步解析后的具体对象类型。

具体修复步骤 #

1. 修正页面组件的Props类型声明 #

确保页面组件接收的params是具体类型而非Promise：

• 对于App Router的page.tsx：

  import type { PageProps } from 'next';
  
  // 定义你的params具体类型
  type MyPageParams = {
    slug: string;
    id: string;
  };
  
  // 使用PageProps泛型指定params类型
  export default function MyPage({ params }: PageProps<MyPageParams>) {
    // 这里params已被解析，直接使用即可
    return <div>当前路由：{params.slug}</div>;
  }
  

• 如果你之前手动声明了Props类型，确保继承PageProps且params不是Promise：

  // 错误写法
  type BadProps = {
    params: Promise<any>; // 这里是问题根源
  };
  
  // 正确写法
  type GoodProps = PageProps & {
    // 自定义额外属性
  };
  

2. 检查generateStaticParams/数据获取逻辑 #

如果使用静态生成路由，确保generateStaticParams返回的是具体的params数组，而非Promise数组：

// 正确示例
export async function generateStaticParams() {
  // 异步获取数据后，直接返回解析后的params对象数组
  const posts = await fetch('/api/posts').then(res => res.json());
  return posts.map(post => ({
    slug: post.slug
  }));
}

避免直接返回Promise对象，必须等待异步操作完成后返回具体值。

3. 清理缓存并重新构建 #

依赖更新后可能存在缓存冲突，执行以下命令清理并重新构建：

rm -rf .next node_modules/.cache
npm install
npm run build

4. 验证Firebase部署配置 #

确保firebase.json的构建配置适配Next.js 15：

{
  "hosting": {
    "source": ".",
    "frameworksBackend": {
      "region": "us-central1"
    },
    "rewrites": [
      {
        "source": "**",
        "function": "nextjsServer"
      }
    ]
  }
}

常见错误案例修正 #

如果你的代码中存在类似以下的写法，直接修改即可：

错误代码：

export default function Page({ params }) {
  // params是未解析的Promise
  const resolvedParams = await params;
  return <div>{resolvedParams.slug}</div>;
}

修正后：

import type { PageProps } from 'next';

type PageParams = { slug: string };

export default function Page({ params }: PageProps<PageParams>) {
  // params已被框架解析为具体类型，无需await
  return <div>{params.slug}</div>;
}

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