Redux中userState.user非空，访问role却报'user为null'错误求助

嘿，我一眼就揪出了两个导致你报错的问题，咱们一步步来解决：

1. 渲染时的属性路径写错了！ #

你在render里打印的是this.props.userState.user，但判断角色的时候却写成了this.props.userState.role——这明显是路径错误！正确的访问路径应该是this.props.userState.user.role，毕竟你的Redux state里user是userState下的子属性。

2. 初始渲染时user为null，直接访问role会触发报错 #

组件第一次渲染时，Redux的userState初始值是{ user: null, finished: false }，这时候firebase的onAuthStateChanged还没触发，getUser请求也还没完成，user还是null状态。这时候直接访问user.role，自然会抛出TypeError: Cannot read properties of null (reading 'role')。

修正后的完整组件代码 #

我们需要先判断user是否存在，再去访问它的role属性，同时修正路径问题：

class ResultsMain extends Component {
  componentDidMount() {
    firebase.auth().onAuthStateChanged(user => {
      if (user)
        getUser(user.email)
          .then(foundUser => {
            console.log('User found:', foundUser);
            this.props.doSetUser(foundUser);
          })
          .catch((err) => {
            console.log(err)
            this.props.history.push('/');
          });
    });
  }

  render() {
    const { user } = this.props.userState;
    console.log("THE PROPS", user)
    
    // 先判断user是否存在，再检查角色
    if (user && user.role === "teacher") {
      return <TeacherSearchPage/>;
    } 
    // 可选：如果user还没加载完成，返回loading状态提升用户体验
    if (!user) {
      return <div>Loading...</div>;
    }
    return <Results />;
  }
}

function mapStateToProps(state) {
  return {
    userState: state.userState,
  }
}

function mapDispatchToProps(dispatch) {
  return {
    doSetUser: user => dispatch(userActions.setUser(user)),
  }
}

export const resultsMainPage = ReactRedux.connect(mapStateToProps, mapDispatchToProps)(ResultsMain);

额外优化（可选） #

如果你使用的是ES2020及以上的语法，可以用可选链操作符?.简化空值判断：

if (user?.role === "teacher") {
  return <TeacherSearchPage/>;
}

这样即使user是null或undefined，也不会抛出错误，而是直接返回undefined，条件不成立。

你的Reducer代码是没问题的，SET_USER action正确更新了userState.user的值，只要foundUser确实包含role属性，就能正常渲染对应组件。

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