Redux Toolkit访问order属性报错：无法读取undefined的country属性

问题原因 #

组件渲染时，order 或 order.shippingAddress 可能处于未初始化状态（比如订单详情请求还在加载中），此时直接访问 country 属性会触发类型错误。结合你提供的Redux状态截图来看，初始状态下的 order 大概率是 undefined 或未包含 shippingAddress 字段的空对象。

可行解决方案 #

1. 使用可选链操作符兜底 #

在访问嵌套属性时添加可选链 ?.，同时设置默认值，避免因属性不存在报错：

<p>Shipping: {order?.shippingAddress?.country || '暂无数据'}</p>

?. 会在属性为 undefined 时停止访问，返回 undefined，再通过 || 提供默认显示文本，保证页面正常渲染。

2. 基于加载状态控制渲染 #

利用Redux中的 loading 状态，在数据加载完成前不渲染订单详情内容：

{loading ? (
  <p>加载订单详情中...</p>
) : (
  <p>Shipping: {order.shippingAddress?.country || '暂无数据'}</p>
)}

3. 初始化Redux切片的默认状态 #

检查你的 orderDetails 切片配置，确保初始状态中 order 被正确初始化，避免出现 undefined：

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

const orderDetailsSlice = createSlice({
  name: 'orderDetails',
  initialState: {
    loading: false,
    error: null,
    order: { shippingAddress: {} } // 预先初始化嵌套对象
  },
  reducers: {
    // 你的reducer逻辑
  }
});

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