React嵌套条件渲染空引用异常问题及空值安全防护咨询

老哥，我一眼就看出你这段条件渲染的问题所在了！你预期的逻辑是「data存在才会走后续判断」，但实际上你的条件结构有漏洞，导致data为null时依然会执行!data.isError的判断，这才触发了空引用异常。

问题出在哪？ #

你写的表达式：

{data && dataIsLoading ? <h1> Loading </h1> : !data.isError ? <Component data={data} /> : <h1> Error </h1>}

逻辑运算符的短路求值只作用于data && dataIsLoading这一部分——当这个整体为false时（不管是data为null，还是data存在但dataIsLoading为false），代码都会直接进入冒号后的分支，也就是去判断!data.isError。这时候如果data是null，自然就会报错：你试图访问null的isError属性。

几种安全的解决方案 #

1. 嵌套条件判断（最直观）

先在外层确保data存在，再在内部处理加载和错误逻辑，从根源上避免空引用：

{data ? (
  dataIsLoading ? (
    <h1> Loading </h1>
  ) : data.isError ? (
    <h1> Error </h1>
  ) : (
    <Component data={data} />
  )
) : null}

外层的data ? (...) : null保证了只有data存在时，才会执行内部的加载/错误判断，完美规避空值问题。

2. 使用可选链运算符（快速修复）

如果你不想改结构，可以用ES2020支持的可选链?.，让data.isError在data为null/undefined时直接返回undefined，不会报错：

{data && dataIsLoading ? <h1> Loading </h1> : !data?.isError ? <Component data={data} /> : <h1> Error </h1>}

不过这种方式只是“堵漏洞”，代码逻辑依然比较绕，后期维护成本高。

3. 提取逻辑到单独函数（最易维护）

把条件判断抽成一个独立函数，让逻辑一目了然，以后加新的渲染分支也方便：

const renderDataContent = () => {
  // 先处理data不存在的情况
  if (!data) return null;
  
  // data存在时，依次判断状态
  if (dataIsLoading) return <h1> Loading </h1>;
  if (data.isError) return <h1> Error </h1>;
  
  // 正常渲染组件
  return <Component data={data} />;
};

// 在JSX中调用
{renderDataContent()}

这种写法可读性拉满，调试和修改都超级方便，推荐作为首选方案。

为啥你之前的尝试没用？ #

你说加了data !== null &&但问题依然存在，大概率是加的位置不对——如果只是在!data.isError前加，那当data为null时，虽然不会触发空引用，但会直接走到Error分支，这可能也不符合你的预期（毕竟data都不存在，未必是“错误”状态）。核心还是要先把data存在与否的判断作为顶层条件，再处理后续状态。

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