React-Redux出现Cannot read properties of undefined报错求助

问题背景 #

尝试从Firestore获取影片数据，通过Redux管理状态并渲染Trending、NewDisney、Originals、Recommended四个模块，但所有模块均抛出错误：

movieSlice.js:26 Uncaught TypeError: Cannot read properties of undefined (reading 'recommend')

错误原因分析 #

报错指向selectRecommend选择器中的state.movie.recommend，说明state.movie是undefined。核心原因是Redux Store中未正确注册movie reducer，或者reducer在store中的key与选择器中使用的movie不匹配。

此外代码还存在两个次要问题：

1. Recommends.js的map函数未返回JSX元素，导致渲染后无内容
2. 初始状态使用null，后续数组判断逻辑不如空数组直观

解决方案 #

1. 正确注册Movie Reducer到Store #

检查你的Store配置文件（通常为store.js），确保movie reducer已添加到root reducer中，且key为movie：

import { configureStore } from "@reduxjs/toolkit";
import movieReducer from "./features/movies/movieSlice";
import userReducer from "./features/user/userSlice";

export const store = configureStore({
  reducer: {
    movie: movieReducer, // 必须使用"movie"作为key，与选择器中的state.movie对应
    user: userReducer
  }
});

2. 修复组件Map函数的返回问题 #

在Recommends.js中，map函数未返回元素，需修改为：

{movies &&
  movies.map((movie, key) => (
    <Link to={"/detail/" + movie.id} key={key}>
      <Wrap imgUrl={movie.cardImg} alt={movie.title} />
    </Link>
  ))
}

或显式使用return：

{movies &&
  movies.map((movie, key) => {
    return (
      <Link to={"/detail/" + movie.id} key={key}>
        <Wrap imgUrl={movie.cardImg} alt={movie.title} />
      </Link>
    );
  })
}

3. 优化初始状态（可选） #

将movieSlice.js中的初始状态从null改为空数组，简化后续判断逻辑：

const initialState = {
  recommend: [],
  newDisney: [],
  original: [],
  trending: [],
};

验证步骤 #

1. 重启开发服务器，确保Store配置生效
2. 检查Firestore数据的type字段是否与代码中的case值匹配（recommend/new/trending/originals）
3. 查看控制台是否有Firestore读取错误，确认数据能正常获取并dispatch到Redux中

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