React Redux读取MongoDB嵌套字段首次渲染TypeError报错

这个报错和Redux核心逻辑无关，是两个典型的前端时序+渲染兜底问题：

1. 提交博客的逻辑没有等待异步创建请求完成就触发路由跳转：dispatch(createBlog(data))是异步动作，原有代码调用dispatch后立刻执行history("/")跳转到列表页，此时createBlog的请求还在pending状态，等请求成功fulfilled时，会直接向列表页Redux中存储的blogs数组追加一条数据——如果POST /blog接口返回结果没有做creator字段的关联查询（MongoDB的populate），这条追加进去的博客数据就没有creator属性，渲染时访问item.creator.name直接报错。
2. 列表页没有做加载态和空值兜底：getBlogs是异步请求，首次加载时没有判断isLoading状态，直接渲染blogs数组的map结果，同时没有对嵌套的creator字段做空值保护，只要数组里存在任意一条缺creator的数据，就会触发类型错误。手动刷新时页面重新初始化，直接走getBlogs全量拉取逻辑，所有数据都带完整的creator字段，所以不会报错。

1. 修正创建博客提交逻辑，等创建完成再跳转 #

修改Createblog.jsx里的handleSubmit方法，等待异步创建动作执行完成再触发路由跳转，避免提前跳页导致脏数据写入store：

const handleSubmit = async (e) => {
  e.preventDefault();
  const data = {
    title,
    texts,
  };
  // 等待异步请求执行完成，unwrap()是Redux Toolkit提供的异步结果获取方法
  await dispatch(createBlog(data)).unwrap();
  history("/");
};

2. 给列表页加加载态和字段空值保护 #

修改Blogpage.jsx的渲染逻辑，加载过程中不渲染博客列表，同时对嵌套字段做空值兜底，避免单条数据异常阻断整个页面渲染：

// 组件内先判断加载状态
if (isLoading) {
  return <div className="container mt-5">博客加载中...</div>
}

return (
  <>
     <div className="container">
        <div className="row">
           <div className="col">
              {/* 修正原代码里写错的text-centr类名 */}
              <h1 className="text-center">Following are your blogs</h1>
           </div>
        </div>

        {blogs.map((item, sl) => {
           return (
              // 优先用博客_id作为列表key，避免下标作为key导致的渲染异常
              <section className="bg-success text-light mt-4" key={item._id || sl}>
                 <div className="row">
                    <div className="col">
                       <h1 className="text-start">{item.title}</h1>
                       {/* 用可选链?.做空值兜底，creator不存在时显示默认值，不触发报错 */}
                       <h5 className="text-start bg-success text-light">Author: {item.creator?.name || "匿名用户"}</h5>
                       <p className="text-start">{item.texts}</p>
                    </div>
                 </div>
              </section>
           );
        })}
     </div>
  </>
);

3. （可选优化）接口返回加格式兜底 #

修改blogService.js里的getBlogs方法，避免后端返回异常格式导致前端渲染报错：

const getBlogs = async () => {
  const response = await Axios.get(api_Link);
  // 加可选链判断，接口返回格式不符合预期时默认返回空数组
  const data = response.data?.data || [];
  return data;
};

• 提交博客时会等创建请求完整走完、拿到后端返回的带完整creator字段的博客数据后，才跳转到列表页，不会再向列表store插入不完整的脏数据
• 列表页加载过程中先显示加载提示，不会提前渲染未就绪的数据
• 哪怕某条博客数据缺失creator字段，也会显示兜底的"匿名用户"，不会直接抛JS错误阻断页面
• 首次跳转进入列表页和手动刷新页面的表现完全一致，不会再出现首次进页报错的问题

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