使用Zustand状态管理向购物车传对象数组时TypeScript报错

问题说明 #

想要将商品的id和title以对象数组的形式存入购物车，但当前代码存在两个问题：

1. TypeScript类型报错，提示返回的数组类型与定义不匹配
2. 实际存储格式是将id、title作为独立元素存入数组，而非预期的对象结构

报错原因 #

1. 类型定义冲突：CartState中carts被定义为SugarProductSchema[]，但代码中直接将id、title（字符串类型）推入数组，导致数组类型变为(string | SugarProductSchema)[]，与原定义不符
2. 数据结构错误：未将id和title包装成对象，而是作为单个元素添加，导致存储格式不符合预期

修正方案 #

步骤1：调整购物车状态的类型定义 #

由于实际只需要存储id和title，无需完整的SugarProductSchema字段，建议单独定义购物车项类型：

// 定义独立的购物车项类型
interface CartItem {
  id: string;
  title: string;
}

interface CartState {
  carts: CartItem[]; // 替换为新的类型
  addToCart: (id: string, title: string) => void;
}

步骤2：修正addToCart的逻辑 #

将id和title包装成对象后再添加到数组中，而非直接推入单个值：

addToCart: (id, title) =>
  set((state) => ({ 
    carts: [...state.carts, { id, title }] // 包装为对象
  })),

完整修正后的代码 #

import create from 'zustand';
import { devtools, persist } from 'zustand/middleware';

// 定义购物车项类型
interface CartItem {
  id: string;
  title: string;
}

interface CartState {
  carts: CartItem[];
  addToCart: (id: string, title: string) => void;
}

const useCartStore = create<CartState>()(
  devtools(
    persist(
      (set) => ({
        carts: [],
        addToCart: (id, title) =>
          set((state) => ({ carts: [...state.carts, { id, title }] })),
      }),
      {
        name: 'cart-storage',
      }
    )
  )
);

export default useCartStore;

验证效果 #

修改后，购物车的存储格式将符合预期：

[
  {"id":"t512521512", "title":"random title"},
  {"id":"xxxxxx", "title":"randosasasam title"}
]

同时TypeScript的类型报错会消失，因为carts数组的元素类型与定义完全匹配。

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