React Hook用useState从localStorage初始化时JSON.parse为null报错如何排查？

你遇到的报错核心原因是属性读取优先级高于逻辑或运算符：当localStorage.getItem("personalInfo")不存在时，返回值为null，JSON.parse(null)的执行结果也是null，此时代码直接对null取.name属性，会立刻抛出TypeError，根本不会走到后面|| ""的兜底逻辑。

之前代码能正常运行，说明当时personalInfo键在localStorage中存在，哪怕存储的是{}，JSON.parse之后也是合法对象，读取不存在的name属性才会返回undefined触发兜底。现在报错大概率是新增逻辑改动了localStorage的存储状态，或者引入了新的运行环境限制。

• 先检查当前站点的localStorage存储：打开浏览器控制台的Application/存储面板，找到对应域名的LocalStorage项，确认personalInfo键是否存在、值是否为合法JSON字符串，还是已经被删除、或者值为"null"
• 搜索所有操作personalInfo的代码：检查新增逻辑中是否有localStorage.removeItem("personalInfo")的调用，或者localStorage.setItem("personalInfo", null)这类写入空值的逻辑，比如用户登出、表单重置的逻辑都有可能误删该键
• 检查是否新增了服务端渲染逻辑：如果项目接入了Next.js、Nuxt.js等SSR框架，或者组件被放到了服务端渲染的节点下，服务端运行环境不存在window.localStorageAPI，getItem会直接返回null触发报错
• 排查浏览器运行环境限制：部分浏览器的隐私无痕模式会限制localStorage的读取，返回值为null，也会触发该问题

建议给读取逻辑加多层兜底，同时用useState的函数式初始值避免重复读取localStorage：

const [name, setName] = useState(() => {
  try {
    const savedInfo = localStorage.getItem("personalInfo");
    // 存储为空直接返回兜底值
    if (!savedInfo) return "";
    const parsedInfo = JSON.parse(savedInfo);
    // 可选链读取属性，避免非对象值报错
    return parsedInfo?.name || "";
  } catch (err) {
    // 捕获JSON解析失败等异常，统一返回兜底值
    return "";
  }
});

如果确认存储内容一定是合法JSON，也可以用更简洁的写法：

const [name, setName] = useState(JSON.parse(localStorage.getItem("personalInfo") || "{}").name || "");

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