React转TypeScript遇报错：类型需具备[Symbol.iterator]()迭代器方法

1. 修复渲染时的解构报错 #

你用Object.values(cart)遍历返回的是单个商品对象（比如{name: "...", ...}），但却用数组解构[id, { ... }]去拆解它——单个商品对象不是数组/可迭代类型，自然没有[Symbol.iterator]方法，这就是报错的原因。

要同时拿到商品ID和对象，得换成Object.entries(cart)，它会返回[商品ID, 商品对象]的数组，解构就合法了：

<ul className={styles.list}>
    {Object.entries(cart).map(
      ([id, { name, brand, shortName, qty, price, deal, discountCode }]) => (
        // 示例JSX内容
        <li key={id}>
          {name} × {qty}
        </li>
      )
    )}
</ul>

2. 修正类型定义匹配实际数据结构 #

你的CartProps类型和实际购物车数据不匹配，会导致TypeScript无法正确推断类型：

• 实际数据里deal是必选字段，要么是0，要么是带percentOff的对象，但你定义的是可选的deal?: {twoFor?: number}，完全不符合结构。
• 需要补充percentOff字段类型，同时处理deal: 0的情况。

修正后的类型：

// 单个商品的类型定义
type CartItem = {
  name: string;
  brand: string;
  shortName: string;
  price: number;
  qty: number;
  deal: { percentOff: number } | 0; // 匹配实际的两种deal格式
  discountCode?: string; // 可选，部分商品无此字段
  dealPrice?: number; // 保留你原有的可选字段
};

// 购物车类型：字符串ID到商品的映射
type CartProps = Record<string, CartItem>;

const cart: CartProps = useSelector(selectCart);

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