TypeScript中使用useSelector读取状态属性报空值错误该如何解决？

错误原因 #

• user reducer的初始状态为{ user: null }，在未触发用户信息赋值的相关action前，useSelector返回的user对象里的user字段为null，此时直接访问user.user.name相当于读取null的name属性，就会抛出空指针错误。
• 你当前useSelector的泛型写法不够规范，可同步优化降低类型冗余。

可行解决方案 #

方案1：使用可选链操作符兜底（最简便） #

访问嵌套属性时添加可选链标记，遇到空值会自动终止访问，不会抛出异常：

console.log(user?.user?.name)

需要默认值的场景可以结合空值合并运算符使用：

const userName = user?.user?.name ?? '访客'

方案2：前置条件判断 #

执行访问逻辑前先判断对应字段是否存在：

if (user?.user) {
  console.log(user.user.name)
  // 其余依赖用户信息的逻辑都放在该判断块内
}

方案3：调整初始值避免空值 #

如果不想频繁做空判断，可以把初始状态里的user字段改为空对象，同步更新对应类型定义即可：

// 修改user reducer的初始状态
const initState = {
  user: {}
}
// 同步修改user reducer的TS类型定义，给属性加可选标记
interface UserState {
  user?: {
    name?: string
    // 补充其余用户字段定义
  }
}

额外优化：简化useSelector的类型写法 #

不需要传两个泛型，直接在回调参数里指定state类型即可，写法更简洁：

const user = useSelector((state: typeRootReducer) => state.user)

也可以按照Redux官方推荐封装自带类型的useSelector钩子，后续全局调用无需重复声明类型。

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