React+Redux中mapStateToProps访问null值报错如何处理

报错根因 #

报错是因为未订阅用户的subscription.currentSubscription为null时，代码直接强行访问其下的priceData、subscriptionData属性，触发空指针异常。

具体修复步骤 #

• 第一步：修改mapStateToProps，增加空值兼容逻辑
  优先用可选链+空值合并做兜底，不存在时返回你需要的默认值（示例用null）：

  const mapStateToProps = ({ user, join, subscription }) => ({
    currentUser: user.currentUser,
    joinStage: join.joinStep,
    priceData: subscription.currentSubscription?.priceData ?? null,
    subscriptionData: subscription.currentSubscription?.subscriptionData ?? null,
    // 额外新增订阅状态标识，方便组件直接判断，可选但易用性更高
    hasValidSubscription: !!subscription.currentSubscription
  });
  

  如果项目环境不支持ES2020的可选链语法，换成短路兼容写法即可：

  priceData: subscription.currentSubscription ? subscription.currentSubscription.priceData : null
  

• 第二步：组件渲染时做分支判断
  在组件渲染逻辑里优先判断订阅状态，分别渲染对应内容，此时已订阅场景可以安全访问相关属性：

  function AccountPage({ hasValidSubscription, priceData, subscriptionData }) {
    // 未订阅场景渲染引导
    if (!hasValidSubscription) {
      return <button>立即加入</button>
    }
    // 已订阅场景渲染详情
    return (
      <div>
        {/* 订阅详情渲染逻辑 */}
      </div>
    )
  }
  

• 第三步（可选）：规范Redux状态初始值
  在subscription对应的reducer里，明确设置currentSubscription的初始值为null，接口查询后如果没有订阅数据也保持赋值为null，保证状态的可预期性，避免出现undefined等不稳定值。

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