Next.js构建时Prisma自动生成类型触发TypeScript类型错误

你的问题核心是Postcard组件的Props类型定义错误，导致TypeScript在构建阶段校验不通过。

问题原因 #

你在postcard.tsx里把组件的Props类型直接设为Post，但实际传入组件的是一个包含post字段的对象（<Postcard post={p} />），TypeScript会认为组件应该接收Post类型的所有字段作为Props，而不是一个名为post的单一属性，因此抛出"Property 'post' does not exist"的错误。

修复步骤 #

修改src/components/postcard.tsx的Props类型定义，明确组件接收的是一个包含post属性的对象：

import Link from 'next/link'
import type {Post} from '@prisma/client'

// 定义Props类型为包含post字段的对象
interface PostcardProps {
  post: Post
}

export default function Postcard({post}: PostcardProps) {
  if (post) {
    return (
      <>
        <div>
          {post.id}
        </div>
        <div>
          <Link href={"/" + post.slug}>
            {post.title}
          </Link>
        </div>
        <div>
          {post.html}
        </div>
      </>
    )
  }
  // 补充组件的默认返回，避免无返回值的类型警告
  return null
}

额外优化 #

可以简化page.tsx里的列表渲染逻辑，用数组map替代for循环，代码更简洁：

export default async function Posts() {
  const posts: Post[] = await getPosts()
  return posts.length > 0 ? (
    posts.map(p => <Postcard key={p.id} post={p} />)
  ) : (
    <>[No Data]</>
  )
}

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