Firebase场景下history跳转后React state为null，访问属性报错如何解决？

问题原因 #

React 状态更新为异步逻辑，你通过history跳转后 Profile 页面挂载时，用户状态初始值为null，此时直接访问state.email就会触发类型错误。可以通过以下几种方案实现等状态赋值完成后再执行后续逻辑：

• 方案1：使用可选链操作符兜底
  这是成本最低的修复方案，不需要调整逻辑执行时机，直接在访问嵌套属性的位置使用?.可选链操作符，配合??空值合并运算符设置默认值即可：
  示例代码：

  // 访问属性时自动判断上层对象是否为null/undefined
  const email = userState?.email ?? ''
  

• 方案2：监听状态变化触发逻辑
  如果需要严格等状态赋值完成后再执行指定代码，可以把逻辑放到useEffect中，同时把目标状态加入依赖数组：
  示例代码：

  import { useEffect, useState } from 'react'
  
  // 假设你的状态变量为user
  const [user, setUser] = useState(null)
  
  useEffect(() => {
    // 状态为null时直接跳过不执行后续逻辑
    if (!user) return
    // 此处写你需要执行的后续代码，此时user已经完成赋值
    console.log('用户邮箱为：', user.email)
  }, [user]) // 依赖数组加入user，user更新后会自动触发该副作用
  

  如果你是需要渲染相关内容，也可以用条件渲染处理：

  return (
    <div>
      {user ? (
        <span>用户邮箱：{user.email}</span>
      ) : (
        <span>用户信息加载中...</span>
      )}
    </div>
  )
  

• 方案3：初始化状态时设置合理默认值
  定义状态初始值时不要设置为null，可以直接设置为包含对应属性的空对象，从根源避免访问属性报错：
  示例代码：

  // 初始化时就设置空对象兜底
  const [user, setUser] = useState({ email: '' })
  

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