Next.js + TypeScript类型错误：PageProps不满足约束问题求解

报错原因分析 #

这个错误的核心是你自定义的PageProps类型与Next.js自动生成的类型不匹配：你定义的params是普通对象{ category: string; }，但自动生成的类型中params被识别为Promise类型，导致两者属性不兼容。

解决方案 #

方案1：移除手动定义的PageProps，让TypeScript自动推导 #

这是最简单的修复方式，直接删掉你手动写的PageProps接口，Next.js会自动为页面组件推导正确的参数类型：

// 错误写法
interface PageProps {
  params: { category: string };
}

export default function Page({ params }: PageProps) {
  // ...组件逻辑
}

// 正确写法
export default function Page({ params }) {
  // params会自动被TS推导为 { category: string }
}

方案2：手动对齐自动生成的类型 #

如果必须手动定义PageProps，可以直接导入Next.js自动生成的类型来复用：

// 从自动生成的类型文件导入正确的PageProps
import type { PageProps as GeneratedPageProps } from './.next/types/app/(root)/products/[category]/page';

type PageProps = GeneratedPageProps;

export default function Page({ params }: PageProps) {
  // 若自动生成的params是Promise，需先解析：
  // const resolvedParams = await params;
  // ...组件逻辑
}

注意：正常情况下App Router的页面params是同步值，若自动生成类型中params为Promise，大概率是你在generateStaticParams或组件写法上有逻辑错误，需同步检查。

方案3：检查generateStaticParams的写法 #

如果使用了静态参数生成函数，确保它返回的是符合要求的异步参数数组：

export async function generateStaticParams() {
  // 正确写法：返回Promise<参数对象数组>
  const categories = await fetch('/api/categories').then(res => res.json());
  return categories.map(category => ({
    category: category.slug,
  }));
}

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