React+Redux Toolkit项目TypeScript报错：quantity属性不存在于never类型

你的错误根源是缺少明确的TypeScript类型定义，导致TS无法推断购物车项和状态的类型，从而抛出never相关错误。以下是具体修复步骤：

1. 定义购物车项的类型接口 #

首先明确购物车中每个商品的结构，至少包含id（用于匹配商品）和quantity（数量），其他属性根据业务需求补充：

// 单个购物车项的类型
interface CartItem {
  id: number; // 若id为字符串则改为string
  name: string;
  price: number;
  // 可添加其他商品属性，如imgUrl等
  quantity: number;
}

2. 修正CartState状态类型 #

你的CartState接口写法错误，它应该直接描述Redux切片的状态结构，而非包含name和initialState：

// 购物车切片的状态类型
interface CartState {
  cart: CartItem[];
}

3. 完善createSlice的类型定义 #

• 给initialState指定CartState类型，让TS明确状态结构
• 给每个reducer的action指定PayloadAction类型，明确传入的载荷结构
• 移除any类型，让TS做完整的类型检查

修复后的完整代码 #

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

// 单个购物车项的类型
interface CartItem {
  id: number;
  name: string;
  price: number;
  quantity: number;
}

// 购物车切片的状态类型
interface CartState {
  cart: CartItem[];
}

// 初始状态，严格匹配CartState类型
const initialState: CartState = {
  cart: [],
}

export const cartSlice = createSlice({
  name: 'cart',
  initialState,
  reducers: {
    // addToCart的载荷是不带quantity的商品数据，quantity由逻辑初始化
    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 })
      }
    },
    // removeItem的载荷是商品id
    removeItem: (state, action: PayloadAction<number>) => {
      state.cart = state.cart.filter(item => item.id !== action.payload)
    },
  },
})

export const cartReducer = cartSlice.reducer
export const { addToCart, removeItem } = cartSlice.actions

关键修复点说明 #

• 原来的state.cart被TS推断为never[]，定义CartState后TS能正确识别为CartItem[]
• 通过PayloadAction明确每个reducer接收的载荷类型，避免action.payload的类型模糊
• 使用Omit<CartItem, 'quantity'>表示addToCart的载荷不需要包含quantity，由添加逻辑初始化该字段

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