React检测未定义变量时，为何一个正常一个触发ReferenceError？

核心原因 #

两者的本质区别在于变量是否被声明过：

• componentObj是已声明但未赋值的变量（比如全局作用域里有var componentObj;，或者被构建工具/第三方代码注入了空声明）。对于这种变量，typeof检测会返回"undefined"，不会触发报错。
• pageData是完全未被声明的变量，JS引擎在执行typeof pageData时，会直接抛出ReferenceError，因为它根本找不到这个变量的存在痕迹。

验证方式 #

你可以在代码最顶部添加两行日志，直观看到差异：

console.log(typeof componentObj); // 输出 "undefined"
console.log(typeof pageData);    // 直接抛出 ReferenceError

解决办法 #

针对pageData的检测，有几种安全的处理方式：

1. 先确保变量有声明 #

如果站点数据是挂载在window全局对象上的，先把它赋值给局部变量：

const pageData = window.pageData; // 即使window.pageData不存在，也只会赋值undefined，不会报错

if (typeof pageData === "undefined") {
  productsOnPage = 'Dummy product';
} else {
  productsOnPage = pageData.product;
}

2. 直接检测window上的属性 #

访问window上不存在的属性不会报错，只会返回undefined，可以直接用这种方式检测：

if (typeof window.pageData === "undefined") {
  productsOnPage = 'Dummy product';
} else {
  productsOnPage = window.pageData.product;
}

3. 用ES2020+的语法简化（推荐） #

用可选链操作符（?.）和空值合并操作符（??）可以一行搞定，代码更简洁安全：

productsOnPage = window.pageData?.product ?? 'Dummy product';

• window.pageData?.product：如果pageData不存在或product不存在，返回undefined
• ?? 'Dummy product'：当左边是undefined或null时，使用右侧的默认值

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