TypeError: 无法读取null的'product'属性，购物车reducer运行报错如何解决？

这个报错是代码尝试访问null值的product属性触发的，结合你给出的代码，有两个核心排查方向：

1. 排查reducer中cartItems的元素合法性 #

你在reducer里用state.cartItems.find((x) => x.product === item.product )遍历购物车项，如果cartItems数组里存在null/undefined元素，就会触发x为null时访问product的报错。
出现null元素的常见原因：

• 全局store初始化时，从localStorage读取购物车数据，没有做合法性校验就直接赋值给了cartItems。比如localStorage里的cartItems被篡改、或者上次序列化时存了异常值，读出来解析后数组里有null项。

2. 排查addToCart的payload合法性 #

• 确认Axios请求返回的data是否为null/undefined：如果请求异常但你没有做错误捕获，解构const {data} = await Axios.get(...)拿到的data是undefined，data._id就会是异常值，极端情况data为null也会触发后续报错。
• 确认CART_ADD_ITEM的action.payload是否存在异常为null的情况：如果有其他地方触发了这个type但传了null payload，就会导致item.product访问报错。

第一步：添加reducer的空值防御 #

修改cartReducer的判断逻辑，遍历时先过滤无效项、同时添加可选链做空值保护：

export const cartReducer = (state = {cartItems:[]}, action) => {
    switch (action.type){
        case CART_ADD_ITEM:
            const item = action.payload;
            // 先过滤掉cartItems里的null/undefined无效项，再添加可选链防御
            const validCartItems = state.cartItems.filter(Boolean);
            const existItem = validCartItems.find((x) => x?.product === item?.product );
            if(existItem){
                return{
                    ...state,
                    cartItems: validCartItems.map((x)=>
                    x?.product === existItem.product ? item:x),
                };
            }else{
                return{...state, cartItems:[...validCartItems, item]};
            }
            default:
                return state;
    }
};

第二步：添加请求异常捕获和payload校验 #

修改addToCart逻辑，添加请求错误捕获、返回值合法性校验：

export const addToCart = (productId, qty) =>async (dispatch, getState) =>{
    try {
        const {data} = await Axios.get(`/api/products/${productId}`);
        // 先校验返回的data是否合法
        if(!data || !data._id) throw new Error('商品数据不存在');
        dispatch({
            type: CART_ADD_ITEM,
            payload: {
                name: data.name,
                image: data.image,
                price: data.price,
                countInStock: data.countInStock,
                product: data._id,
                qty,
            },
        });
        localStorage.setItem('cartItems', JSON.stringify(getState().cart.cartItems));
    } catch (err) {
        // 可自行添加错误提示逻辑，比如弹toast提示用户商品加载失败
        console.error('添加购物车失败：', err);
    }
};

第三步：添加store初始化时的localStorage数据校验 #

如果你配置store的时候是从localStorage读取初始cart数据，需要加兜底逻辑：

// 示例：你初始化redux store时读取购物车的逻辑
const initialCartItems = localStorage.getItem('cartItems') 
  ? JSON.parse(localStorage.getItem('cartItems')) 
  : [];
// 加过滤兜底，只保留合法的购物车项
const validInitialCartItems = Array.isArray(initialCartItems) ? initialCartItems.filter(Boolean) : [];
// 把validInitialCartItems作为cart reducer的初始state传入即可

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