Next.js 15动态Server Component部署Vercel时TypeScript报错：params类型与Promise不兼容

我之前在Next.js 15部署动态路由Server Component到Vercel时，也遇到过一模一样的问题——本地跑next dev完全正常，一到Vercel构建就卡在「Checking validity of types」步骤报这个类型错误，折腾了好几个小时才搞定，太懂你的崩溃感了！

问题根源 #

你看到的错误Type '{ slug: string; }' is missing the following properties from type 'Promise<any>'，本质是Next.js 15对App Router页面组件的props类型约束做了更严格的规范，你的自定义CategoryPageProps接口没有匹配官方的PageProps类型要求，导致类型检查不通过。

亲测有效的官方解决方法 #

下面两种方法都是完全符合Next.js 15官方文档的规范，都能解决Vercel的构建错误：

方法1：直接用官方内置的PageProps类型（最推荐）

Next.js 15已经内置了PageProps类型，你可以通过泛型直接指定动态参数的结构，不用自己手写整个props接口，省心又不容易错：

// app/category/[slug]/page.tsx
import { PageProps } from 'next'; // 导入官方的PageProps类型
// ...其他导入保持不变

// 通过泛型定义params的具体结构
export default async function CategoryPage({
  params,
  searchParams,
}: PageProps<{ slug: string }>) {
  const { category, products } = await getData(params.slug, searchParams);
  // ...你的剩余代码完全不用改
}

方法2：自定义props接口并对齐官方约束

如果你还是想自己定义props接口，一定要基于Next.js官方提供的类型来写，确保完全符合PageProps的约束：

import type { Params, SearchParams } from 'next/dist/shared/lib/app-router-context.shared-runtime';

// 自定义props接口，合并官方类型和你的业务字段
interface CategoryPageProps {
  params: Params & { slug: string }; // 确保params继承官方Params类型
  searchParams: SearchParams; // 直接用官方的SearchParams类型
}

export default async function CategoryPage({
  params,
  searchParams,
}: CategoryPageProps) {
  // ...你的剩余代码不变
}

必须检查的TypeScript配置 #

除了类型标注，还要确保你的tsconfig.json是适配Next.js 15的，不然很容易出现类型冲突：

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "lib": ["ES2022", "DOM", "DOM.Iterable"],
    "jsx": "preserve",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "incremental": true,
    "plugins": [{ "name": "next" }]
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}

为什么本地正常但Vercel报错？ #

本地next dev的TypeScript检查是增量式的，会跳过一些非关键的类型问题；而Vercel构建时会执行next build，它会触发全量的TypeScript严格检查，所以本地藏着的类型问题会在部署时彻底暴露出来。

你之前的尝试为啥没用？ #

• // @ts-expect-error：Next.js 15的类型检查太严格了，无效的TS指令会被忽略，而且Vercel的构建不会因为这个指令放过真正的类型冲突。
• 改成{ params }: any：如果你的项目开了strict: true，any类型会和官方的PageProps约束直接冲突，自然还是报错。
• await params：完全搞错了——Server Component的params是直接传递的普通对象，根本不需要await，这反而会让类型更加混乱。

内容来源于stack exchange