如何修复TypeScript中类型无重叠导致的条件恒假错误？

错误原因 #

当前代码中const role = 'GUEST'被TypeScript推断为字面量类型"GUEST"，而非包含"GUEST"|"HR"|"ADMIN"的联合类型。因此TS会判定role === 'HR'或role === 'ADMIN'的条件永远为false，抛出ts(2367)错误。

修复方案 #

方案1：显式声明联合类型

先定义角色的联合类型，再为role指定该类型，明确告知TS它的所有可能取值：

// 定义角色类型
type Role = "GUEST" | "HR" | "ADMIN";

// 指定role的类型为Role，后续可动态替换值
const role: Role = 'GUEST';

<Drawer
  anchor="left"
  open={showMenu}
  onClose={toggleMenu}
  PaperProps={{ sx: { width: '250px' } }}
>
  {role === 'GUEST' && (
    <List>
      <HeaderLinkItem
        icon={LoginIcon}
        link="/login"
        label="Login"
        onClick={toggleMenu}
      />
    </List>
  )}
  {role === 'HR' && (
    <List>
      <HeaderLinkItem
        icon={DashboardIcon}
        link="/dashboard"
        label="Dashboard"
        onClick={toggleMenu}
      />
      <HeaderLinkItem
        icon={ListAltIcon}
        link="/employees"
        label="Employees"
        onClick={toggleMenu}
      />
      <HeaderLinkItem
        icon={ListAltIcon}
        link="/candidates"
        label="Candidates"
        onClick={toggleMenu}
      />
      <HeaderLinkItem
        icon={PostAddIcon}
        link="/candidates/create"
        label="New candidate"
        onClick={toggleMenu}
      />
    </List>
  )}
  {role === 'ADMIN' && (
    <List>
      <HeaderLinkItem
        icon={DashboardIcon}
        link="/dashboard"
        label="Dashboard"
        onClick={toggleMenu}
      />
      <HeaderLinkItem
        icon={ListAltIcon}
        link="/employees"
        label="Employees"
        onClick={toggleMenu}
      />
      <HeaderLinkItem
        icon={ListAltIcon}
        link="/candidates"
        label="Candidates"
        onClick={toggleMenu}
      />
      <HeaderLinkItem
        icon={PostAddIcon}
        link="/candidates/create"
        label="New candidate"
        onClick={toggleMenu}
      />
      <HeaderLinkItem
        icon={AdminPanelSettingsIcon}
        link="/admin"
        label="Admin Panel"
        onClick={toggleMenu}
      />
    </List>
  )}
</Drawer>

方案2：类型断言（快速临时修复）

若不想单独定义类型，可直接用类型断言指定role的取值范围：

// 断言为联合类型，明确可能的取值
const role = 'GUEST' as "GUEST" | "HR" | "ADMIN";

方案3：结合React状态管理（适配动态场景）

如果role是动态获取或需要状态切换的，直接在useState中指定联合类型：

import { useState } from 'react';

type Role = "GUEST" | "HR" | "ADMIN";

// 初始化状态并指定类型，后续可通过setRole动态切换
const [role, setRole] = useState<Role>('GUEST');

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