如何解决打字稿错误：此条件将始终返回"false"，因为当我有 3 个条件渲染时，类型没有重叠

Question

我的jsx代码中有3个条件检查，取决于const角色，该角色现在是硬编码的，但稍后将具有动态值。它可能具有3个值：；GUEST"HR"ADMIN"；并且根据const角色值，应该呈现来自MUI的Drawer的特定List组件。但当我将这3个条件添加到代码中并悬停在"0"上时；HR"；或"；ADMIN"；我得到的评论是，这个条件将始终返回"false"，因为类型"；GUEST以及"；ADMIN"没有重叠。ts(2367(

const 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>

你能建议一下怎么修吗？

感谢

Answer 1

您可以这样修复它(注意string类型(。默认情况下，角色的类型不是字符串，而是"GUEST"(一个可能只有一个值的常量字符串(：

const role: string = 'GUEST';