Next.js动态路由TypeScript错误：params缺失Promise属性

问题描述 #

在Next.js 15.1.3的App Router动态路由[slug]/page.tsx中，本地开发运行正常，但部署到Vercel时构建阶段抛出TypeScript错误：

Type error: Type 'PageProps' does not satisfy the constraint 'import("/vercel/path0/.next/types/app/(app)/nemovitost/[slug]/page").PageProps'.
Types of property 'params' are incompatible.
Type '{ slug: string; }' is missing the following properties from type 'Promise': then, catch, finally, [Symbol.toStringTag]

相关代码：

// app/(app)/nemovitost/[slug]/page.tsx
import { Suspense } from 'react';
import { getPropertyBySlug } from '@/lib/actions';
import { notFound } from 'next/navigation';
import { Featured } from "@/components/featured";
// ... other imports

interface PageProps {
  params: {
    slug: string;
  }
}

export default async function PropertyDetailPage({ params }: PageProps) {
  const property = await getPropertyBySlug(params.slug);

  if (!property) {
    notFound();
  }

  return (
    <>
      <div className='font-geist-sans flex justify-center'>
        <div className="flex-col w-[1100px] mx-4">
          <h1 className="text-blue-800 font-bold">
            {property.title}
          </h1>
          
          {/* Rest of the JSX */}
          
          <Suspense fallback={<LoadingFeatured />}>
            <Featured />
          </Suspense>
        </div>
      </div>
    </>
  );
}

已尝试过自定义不同params类型、重构组件、添加'use server'、拆分组件、独立API路由等方法，问题仍未解决。

解决方案 #

1. 移除自定义PageProps接口，直接显式定义props类型 #

删除自定义的PageProps接口，直接在组件参数中定义类型，避免和Next.js自动生成的类型冲突：

// 移除原有的interface PageProps
export default async function PropertyDetailPage({ params }: { params: { slug: string } }) {
  const property = await getPropertyBySlug(params.slug);
  // ... 剩余代码不变
}

2. 使用Next.js官方提供的Params类型 #

从next/navigation导入官方的Params类型，确保类型定义和框架一致：

import type { Params } from 'next/navigation';
// ... 其他导入

export default async function PropertyDetailPage({ params }: { params: Params<{ slug: string }> }) {
  const property = await getPropertyBySlug(params.slug as string); // 若需要，添加类型断言
  // ... 剩余代码不变
}

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

• 本地删除.next文件夹和node_modules/.cache，重新执行npm run build测试
• 在Vercel部署设置中，勾选"Skip cache for dependencies"，触发全新构建，避免缓存的旧类型文件干扰

4. 对齐本地与Vercel的TypeScript版本 #

检查package.json中的typescript版本，确保本地开发和Vercel使用的版本完全一致，避免版本差异导致的类型推断不一致：

// package.json
{
  "devDependencies": {
    "typescript": "^5.3.3" // 锁定具体版本，避免^带来的自动升级
  }
}

5. 临时调整TS配置（应急方案，不推荐长期使用） #

如果以上方法无效，可在tsconfig.json中添加以下配置跳过部分严格类型检查：

{
  "compilerOptions": {
    "skipLibCheck": true,
    "strictNullChecks": false
  }
}

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