为何TypeScript提示Cart类型不存在product属性？模型已定义该关联

我在Prisma中定义了Product和Cart模型，Cart通过productId关联Product实体，但在React的CartItem组件里导入@prisma/client的Cart类型后，访问cartItem.product时TypeScript报错，说这个属性不存在，只有productId字段。明明模型里已经定义了product关联，这是怎么回事？

Prisma模型定义 #

model Product {
  id          String @id @default(auto()) @map("_id") @db.ObjectId
  name        String
  description String
  price       Float
  image       String

  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt

  cart Cart[]
}

model Cart {
  id String @id @default(auto()) @map("_id") @db.ObjectId

  userId String @db.ObjectId
  user   User   @relation(fields: [userId], references: [id])

  productId String  @db.ObjectId
  product   Product @relation(fields: [productId], references: [id])

  quantity  Int      @default(1)
  dateAdded DateTime @default(now())
}

CartItem组件代码 #

import { Cart } from "@prisma/client";

const CartItem = ({ cartItem }: { cartItem: Cart }) => {

  const { image, name, description, price } = cartItem.product;
  return (...)
}

报错信息 #

属性“product”在类型“{ id: string; userId: string; productId: string; quantity: number; dateAdded: Date; }”上不存在。你是不是想写“productId”?ts(2551)
index.d.ts(4545, 7): “productId”在此处声明。

问题原因及解决方法 #

核心原因 #

Prisma生成的基础Cart类型只包含数据库中实际存储的标量字段（比如id、productId、quantity这些），而product属于关系关联字段，默认不会被包含在基础类型里。同时，如果你在查询Cart数据时没有显式加载关联的product，返回的实际数据里也不会有这个属性，TypeScript自然会报错。

解决步骤 #

1. 后端查询时必须加载关联字段
   在查询Cart数据时，一定要用include或select显式指定加载product关联：

   // 后端示例代码
   const getCartItems = async (userId: string) => {
     return await prisma.cart.findMany({
       where: { userId },
       include: { product: true } // 关键：必须加上这句才能获取product数据
     });
   };
   

2. 前端使用正确的类型

   • 推荐方式：从后端查询结果推导类型（自动匹配，避免手动维护）
     在后端导出查询结果的类型，前端直接导入使用：

     // 后端代码中导出类型
     export type CartWithProduct = Awaited<ReturnType<typeof getCartItems>>;
     
     // 前端组件中导入并使用
     import { CartWithProduct } from '../services/cartService';
     
     const CartItem = ({ cartItem }: { cartItem: CartWithProduct }) => {
       const { image, name, description, price } = cartItem.product;
       // 正常渲染逻辑
     }
     

   • 手动组合类型：如果需要单独定义，直接组合基础类型

     import { Cart, Product } from "@prisma/client";
     
     // 手动定义包含product的Cart类型
     type CartWithProduct = Cart & { product: Product };
     
     const CartItem = ({ cartItem }: { cartItem: CartWithProduct }) => {
       // ...
     }
     

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