React运行报错TypeError: Cannot read properties of undefined (reading 'name')如何排查

AI 小北

2026-9-26

问题根因

报错触发的直接原因是代码在currentPackage为undefined的场景下，直接访问了其name属性，JS 不允许读取 undefined/ null 类型值的属性，因此抛出 TypeError。

解决方案

提供三种可直接落地的修复方式，可根据项目场景选择：

方案1：使用可选链做安全访问（适配 ES2020+ 项目，改动量最小）
直接在currentPackage后加?.标识可选访问，当currentPackage为 undefined 时会直接短路返回 undefined，不会执行后续逻辑，修复后的代码如下：

const packageLogo = currentPackage?.name && currentPackage?.logo && (
  <div className="vk-inductee-button-wrapper">
    <div className="vk-inductee-button-image-wrapper">
      <img
        src={currentPackage.logo}
        className="vk-inductee-button-image"
        alt="inductee-img"
      />
    </div>
    <div className="vk-inductee-button-label">
      <span>{currentPackage.name}</span>
    </div>
  </div>
);

方案2：提前判断currentPackage是否存在（适配不支持可选链的旧项目）
在原有判断逻辑最前面加一层currentPackage存在性校验：
```
const packageLogo = currentPackage && currentPackage.name && currentPackage.logo && (
  // 原有JSX逻辑保持不变
)
```
方案3：给currentPackage设置默认兜底值
解构props时给currentPackage赋值空对象作为默认值，就算上层没传该参数也不会出现undefined：
```
const {
  hasAccounts,
  asideClassesFromConfig,
  disableScroll,
  htmlClassService,
  currentPackage = {}, // 新增默认值配置
  user,
} = this.props;
```