无角色用户致站点崩溃，如何用可选链安全处理null角色？

针对你遇到的未分配角色导致导航栏崩溃的问题，推荐采用数据层兜底+组件层防御性编程的双重方案，既从源头规范数据结构，又在组件层面避免null/undefined引发的报错：

一、数据层：安全兜底，确保roles始终为数组 #

改进onGetCurrentUserSuccess中的处理逻辑，覆盖roles为null、undefined或非数组的情况，确保返回的currentUser.roles始终是符合预期的数组：

const onGetCurrentUserSuccess = (response) => {
  let currentUser = response.item;
  // 兜底处理：如果roles不是数组，默认设为["Customer"]
  currentUser.roles = Array.isArray(currentUser.roles) ? currentUser.roles : ["Customer"];
};

这里用Array.isArray做判断比单纯检查null更严谨，能防范后端返回异常数据（比如字符串、数字）的情况。如果只想针对null/undefined兜底，也可以用空合并运算符简化：

currentUser.roles = currentUser.roles ?? ["Customer"];

二、组件层：用可选链+空值合并做防御性判断 #

在导航栏渲染的mapNavLink函数中，针对currentUser.roles可能的异常情况做防护，避免直接访问currentUser.roles[0]引发报错：

const mapNavLink = (item, index) => {
  // 先获取用户的有效角色，兜底为"Customer"
  const userRole = currentUser.roles?.[0] ?? "Customer";

  if (currentUser.isLoggedIn === true) {
    // 用可选链判断item.roles是否存在，再检查是否包含用户角色
    if (item?.roles?.includes(userRole)) {
      return item.children === undefined ? (
        <Nav.Link key={index} as={Link} to={item.link}>
          {item.menuitem}
        </Nav.Link>
      ) : (
        <NavDropdownMain
          item={item}
          key={index}
          onClick={(value) => setExpandedMenu(value)}
        />
      );
    }
  } else if (currentUser.isLoggedIn === false) {
    return (
      <Nav.Link key={index} as={Link} to={item.link}>
        {item.menuitem}
      </Nav.Link>
    );
  }
};

这里的关键优化点：

• 用currentUser.roles?.[0] ?? "Customer"确保userRole永远有有效值，不会因为roles为null/undefined导致访问下标报错
• 把登录状态判断和权限判断拆分，逻辑更清晰
• 保留item?.roles的可选链，避免item无roles属性时的报错

为什么推荐双重方案？ #

• 数据层兜底是源头治理，确保整个应用中currentUser.roles的结构统一，减少下游组件的重复判断
• 组件层防护是最后一道防线，即使数据层出现遗漏（比如其他接口返回异常数据），也能避免页面崩溃

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