React Redux切片TypeScript报错：Property 'quantity' does not exist on type 'never'

1. 明确购物车项的类型定义 #

先定义一个CartItem接口，包含购物车项的所有必要属性，包括quantity和唯一标识id，以及业务中需要的其他字段：

interface CartItem {
  id: number | string; // 根据实际ID类型调整（数字/字符串）
  quantity: number;
  // 补充action.payload中的其他属性，比如name、price等
  // 例如：name: string; price: number;
}

2. 给切片的State指定类型 #

确保Redux切片的初始状态和State有明确的类型约束，避免TypeScript将cart推断为never[]：

import { createSlice, PayloadAction } from '@reduxjs/toolkit';

interface CartState {
  cart: CartItem[];
}

const initialState: CartState = {
  cart: [],
};

3. 修改addToCart reducer代码 #

移除Record<string, unknown>的类型注解，改用定义好的CartItem类型，并给action指定PayloadAction类型（从@reduxjs/toolkit导入）：

const cartSlice = createSlice({
  name: 'cart',
  initialState,
  reducers: {
    addToCart: (state, action: PayloadAction<Omit<CartItem, 'quantity'>>) => {
      const itemInCart = state.cart.find(item => item.id === action.payload.id);
      if (itemInCart) {
        itemInCart.quantity++;
      } else {
        state.cart.push({ ...action.payload, quantity: 1 });
      }
    },
    // 其他reducer...
  },
});

问题原因说明 #

• 之前使用Record<string, unknown>时，TypeScript无法识别item.id和item.quantity的具体类型，unknown类型不允许直接访问属性或进行自增操作。
• 如果没有给state.cart指定明确的数组类型，TypeScript会将其推断为never[]，导致find方法返回never，进而触发“Property 'quantity' does not exist on type 'never'”错误。

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