使用NextJS+TypeScript+Prisma获取Tag时出现undefined值问题

问题根源 #

你遇到的undefined错误本质是两个不匹配：

• Prisma查询Post时没关联拉取Tag数据，导致返回的post对象里根本没有tag字段
• PostCard组件的Props定义了tag字段，但实际传入的post数据缺少该字段，TypeScript类型校验没起到应有的作用（或者你忽略了类型警告）

解决步骤 #

1. 修正Prisma查询，关联获取Tag

修改你的getPost函数，在查询中通过include选项关联拉取Tag数据。查询单个Post用findUnique，查询列表用findMany，示例如下：

// 查询所有带Tag的Post
export async function getPosts() {
  return prisma.post.findMany({
    include: {
      tag: true, // 关键：关联查询Post对应的Tag
    },
  });
}

// 查询单个带Tag的Post
export async function getPostById(id: string) {
  return prisma.post.findUnique({
    where: { id },
    include: { tag: true },
  });
}

如果Post和Tag是可选关联（比如Post的tagId是可选字段），查询返回的tag可能为null，后续渲染时要注意处理这种情况。

2. 对齐PostCard的Props类型

确保组件接收的post类型和Prisma返回的带Tag的数据结构一致。推荐直接复用Prisma生成的类型，避免手动定义出错：

import type { Prisma } from '@prisma/client';

// 生成包含Tag的Post类型
type PostWithTag = Prisma.PostGetPayload<{ include: { tag: true } }>;

// 定义PostCard的Props
interface PostCardProps {
  post: PostWithTag;
}

// 组件示例
export default function PostCard({ post }: PostCardProps) {
  return (
    <div className="post-card">
      <h3>{post.title}</h3>
      {/* 用可选链处理tag为null的情况 */}
      <span className="tag">{post.tag?.name}</span>
    </div>
  );
}

3. 验证TanStackQuery的数据获取

确保你用TanStackQuery调用修正后的getPost函数，比如：

import { useQuery } from '@tanstack/react-query';
import getPosts from '@/lib/getPosts';
import PostCard from '@/components/PostCard';

export default function Home() {
  const { data: posts } = useQuery({
    queryKey: ['posts'],
    queryFn: getPosts,
  });

  return (
    <div className="posts-container">
      {posts?.map(post => (
        <PostCard key={post.id} post={post} />
      ))}
    </div>
  );
}

补充：你的Prisma Schema关联示例（参考） #

假设你的Schema是这样的关联结构：

model Post {
  id    String @id @default(cuid())
  title String
  content String
  tagId String? // 可选关联Tag的id
  tag   Tag?   @relation(fields: [tagId], references: [id])
}

model Tag {
  id   String @id @default(cuid())
  name String @unique
  posts Post[] // Tag对应的所有Post
}

如果是必选关联（tagId无?），查询返回的tag一定存在，渲染时可以不用可选链，但建议保留以提升代码健壮性。

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