TypeScript中React传递对象Props与定义State类型报错问题排查

你的代码报错核心是类型定义和实际数据结构不匹配，具体问题分两点：

1. State的类型定义与API返回数据不兼容 #

你给useState指定了ListProducts类型，但：

• ListProducts接口定义的是一个包含data字段的对象（data: SingleProduct[]）
• 而API返回的res.data.products是直接的产品数组，不是带data属性的对象
• 同时你给State的初始值是[]，这和ListProducts类型（对象类型）完全不匹配，TypeScript会直接报错类型不兼容

2. SingleProduct接口定义错误 #

SingleCard组件接收的props是{ product: 单个产品对象 }，但你定义的SingleProduct接口是：

export interface SingleProduct {
    product: {
        title: string,
        description: string,
        price: number,
        thumbnail: string
    }
}

这意味着你要给SingleCard传递的是{ product: { product: {...} } }这种嵌套结构，但实际你传递的item是单个产品对象，所以组件props类型完全不匹配，导致后续渲染时访问product.thumbnail等属性报错。

修正方案 #

1. 重新定义正确的类型：

// ../config/Types.ts
// 单个产品的类型
export interface Product {
  title: string;
  description: string;
  price: number;
  thumbnail: string;
  // 可根据API返回添加其他字段，比如id等
}

// API响应的整体类型（可选，用于Axios类型提示）
export interface ProductsApiResponse {
  products: Product[];
  total: number;
  skip: number;
  limit: number;
}

2. 修正Home组件的State类型：

const [data, setData] = useState<Product[]>([])

useEffect(() => {
  axios.get<ProductsApiResponse>('https://dummyjson.com/products')
    .then(res => {
      setData(res.data.products)
    })
}, [])

3. 修正SingleCard的props类型：

import React from 'react'
import { Product } from '../config/Types'

const SingleCard = ({ product }: { product: Product }) => {
  // ... 原有渲染逻辑
}

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