首先咱们拆解下你的问题：你原本以为state &&能拦住null时执行map，结果还是报错了，还发现typeof null返回object，同时你在用@emotion/react处理JSX。我来帮你理清原因和解决办法。

为什么state &&没起到预期作用？ #

按理说null是JavaScript的假值，null && 后续代码应该直接返回null，不会执行后面的map。那报错的可能原因有这些：

1. Hook调用位置违反React规则（最可能的隐藏问题） #

看你给出的简化代码，useState直接写在组件函数外面了：

import { useState } from 'react';
const [state, setState] = useState(null) // 这里写法错误！

React的Hook必须在组件函数的顶层调用，不能放在组件外部、条件判断或循环里。如果你的实际代码也是这么写的，会直接打乱React的状态管理逻辑——哪怕你没调用setState，state的值也会变得不可预测，导致条件判断失效。

正确的写法应该把useState放在组件内部：

import { useState } from 'react';

const MyComponent = () => {
  const [state, setState] = useState(null); // 放在组件函数的顶层
  // ...其余代码
};

2. typeof null的历史遗留坑 #

你发现typeof null返回object，这是JavaScript的历史bug，但这和你的条件判断失效本身无关——因为state &&的判断逻辑是看state是否为真，而不是看它的类型。这个知识点容易混淆，但不是直接导致报错的原因。

3. @emotion/react的影响（可能性极低） #

虽然@emotion会处理JSX，但它不会改变JavaScript的基本逻辑运算。除非你的代码里有特殊的emotion语法干扰了表达式判断，但这种情况非常罕见。

保留state初始值为null的解决方案 #

既然你想保留初始值为null，我们需要更严谨的条件判断，确保只有state是数组时才执行map：

方案1：用Array.isArray()精准判断 #

这是最可靠的方式，直接检查state是否为数组：

return (
  <div>
    {Array.isArray(state) && (
      <div>
        {state.map(element => <div>{element.title}</div>)}
      </div>
    )}
  </div>
);

方案2：使用可选链操作符?. #

ES2020的可选链可以让你安全调用方法，哪怕前面的值是null或undefined：

return (
  <div>
    <div>
      {state?.map(element => <div>{element.title}</div>)}
    </div>
  </div>
);

如果state是null，state?.map会返回undefined，React会自动忽略这个值，不会渲染任何内容，也不会报错。

方案3：组合判断（兼容旧环境） #

如果你的项目还不支持可选链，可以组合判断state不为空且是数组：

return (
  <div>
    {state != null && Array.isArray(state) && (
      <div>
        {state.map(element => <div>{element.title}</div>)}
      </div>
    )}
  </div>
);

总结 #

先检查你的Hook调用位置是否符合React规则，这很可能是导致条件判断失效的根源。然后用上述方案中的一种替换原来的条件判断，就能在保留state初始值为null的前提下解决报错问题。

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