Gatsby传递location.state出现Cannot read properties of null报错如何解决

问题根因 #

用户直接修改URL访问/pageB时，没有通过Link组件触发跳转，此时location.state本身为null，而非location.state.fromPageA为null。你直接读取location.state.fromPageA相当于在null对象上访问属性，因此会抛出对应报错。

修复方案 #

1. 增加空值防御判断 #

可以通过可选链操作符或者逐级判断的方式，先校验location.state是否存在再读取内部属性，修改后的useEffect代码如下：

useEffect(() => {
  // 方式1：可选链写法，ES2020+支持
  const isFromPageA = location.state?.fromPageA
  // 方式2：兼容旧环境的逐级判断写法
  // const isFromPageA = location.state && location.state.fromPageA
  console.log(isFromPageA)
  if (!isFromPageA) {
    navigate('/pageA')
  }
}, [location, navigate]);

注意要把location和navigate加入useEffect的依赖数组，避免闭包导致判断逻辑不生效。

2. 兜底默认值兼容 #

如果需要更稳定的取值逻辑，可以在解构时直接设置默认值，完全避免空值报错：

// location.state为空时会 fallback 到空对象，fromPageA默认值设为false
const { fromPageA = false } = location.state || {}

此时不管location.state是undefined还是null，都能拿到合法的布尔值进行判断。

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