Vercel部署时遭遇「Types of property 'params' are incompatible」类型不兼容错误的解决求助

兄弟，我看了你的代码，一眼就瞅出问题出在动态路由参数的类型定义和实际路由不匹配上——这绝对是Next.js App Router里新手最容易踩的类型坑之一，咱们一步步来把它搞定：

核心问题拆解 #

• 你应该是用了类似[slug]/page.tsx的动态路由文件名吧？那Next.js自动生成的params对象里的键应该是slug，但你现在把params的类型定义成了{ title: string }，还在代码里写params.title，可实际Next.js传给你的是{ slug: string }，这直接就触发了类型不兼容的报错。
• 另外你顶部那行type Params = Promise<{ slug: string[] }>的定义完全错得离谱：params是同步的普通对象，根本不是Promise；而且如果是单个动态路由（不是[...slug]这种通配路由），slug是单个字符串，不是数组。

具体修改步骤 #

1. 统一修正params的类型与代码引用

把generateMetadata和Page组件里的params类型从{ params: { title: string }; }改成{ params: { slug: string }; }，同时把代码里所有的params.title全换成params.slug——毕竟你数据库里用的是slug字段，和路由参数保持一致才合理。

修改后的generateMetadata：

export async function generateMetadata({ params }: { params: { slug: string }; }): Promise<Metadata> {
  const blog = await prisma.blog.findUnique({
    where: { slug: params.slug },
    select: { title: true, metaDescription: true },
  });

  if (!blog) {
    return {
      title: "Blog Not Found",
      description: "This blog could not be located.",
    };
  }

  return {
    title: blog.title,
    description: blog.metaDescription || "A blog post from Suvo Roy.",
  };
}

修改后的Page组件：

export default async function Page({ params }: { params: { slug: string }; }) {
  const blog = await prisma.blog.findUnique({
    where: { slug: params.slug },
    include: {
      author: {
        select: { name: true, email: true, imageUrl: true },
      },
    },
  });

  if (!blog) notFound();
  return <BlogDetailPage blog={blog} />;
}

2. 删除错误的Params类型定义

直接删掉你顶部那行type Params = Promise<{ slug: string[] }>;，这个定义完全不符合Next.js的params类型规范，留着只会添乱。

3. 确认路由文件名和参数匹配

再检查一遍你的路由文件夹结构，确保动态路由部分是[slug]（比如app/blog/[slug]/page.tsx），如果你的路由文件名是[title]，那当我没说，但结合你数据库用slug字段的情况，用[slug]显然更合理，也能避免后续混淆。

4. 本地先过类型检查

改完之后，本地先跑一下npm run type-check（用yarn的话就是yarn type-check），确保没有类型错误了再部署到Vercel——毕竟Vercel部署时会严格执行TypeScript类型检查，本地先搞定能省不少部署时的麻烦。

这样改完之后，那个类型不兼容的错误肯定就消失了，部署到Vercel也能顺利通过。

内容来源于stack exchange