TypeScript报错：类型BlogDetailProps不存在id属性

错误原因 #

你犯了一个典型的组件参数结构错误：BlogDetailProps定义的是组件接收的props对象结构——props里包含params属性，而你直接把组件参数当成了params本身。TypeScript检测到你试图访问params.id，但此时的params是整个props对象，它本身并没有id属性，只有params.params.id才是正确的路径，因此抛出类型错误。

修复方案 #

方案1：解构props中的params（保留FC类型）

直接在组件参数里解构出params，这样就能正确访问id属性：

import prisma from '@/lib/db';
import { FC } from 'react'

interface BlogDetailProps {
  params: {
    id: string,
  }
}

const BlogDetail: FC<BlogDetailProps> = async({ params }) => {

  const post = await prisma.post.findFirst({
    where: {
      id: params.id,
    },
    include: {
      author: true,
    },
  });

  return (
    <div className='max-w-4xl mx-auto py-8'>
        <img src={post?.image} alt={post?.title} />
        <h2>{post?.title}</h2>
        <p>Written by: {post?.author?.name}</p>
        <div className='mt-4'>{post?.content}</div>
    </div>
  )
}

export default BlogDetail

方案2：移除FC类型（Next.js更推荐写法）

Next.js组件通常不需要依赖FC类型，直接给参数指定类型更简洁：

import prisma from '@/lib/db';

interface BlogDetailProps {
  params: {
    id: string,
  }
}

const BlogDetail = async({ params }: BlogDetailProps) => {

  const post = await prisma.post.findFirst({
    where: {
      id: params.id,
    },
    include: {
      author: true,
    },
  });

  return (
    <div className='max-w-4xl mx-auto py-8'>
        <img src={post?.image} alt={post?.title} />
        <h2>{post?.title}</h2>
        <p>Written by: {post?.author?.name}</p>
        <div className='mt-4'>{post?.content}</div>
    </div>
  )
}

export default BlogDetail

额外说明 #

如果这是Next.js Pages Router的组件，异步组件写法不适用，需要改用getServerSideProps或getStaticProps来获取数据；如果是App Router的组件，当前异步写法是合规的。

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