MUI组件权限控制问题：布尔值使用异常致按钮禁用逻辑失效

报错核心原因 #

你在Link的className属性里写的Authenticate.level != 'admin' ? check=false:check=true是赋值语句，执行后返回的是布尔值，但className只接受字符串、undefined这类有效值，布尔值不符合类型要求，所以触发红线报错。而且这种在JSX属性里直接赋值变量的写法本身逻辑混乱，不符合代码规范。

正确写法 #

先提前计算好控制禁用状态的变量，再把它传给ListItem的disabled属性，同时删掉Link里那个错误的className赋值：

const Authenticate = useSelector(userSelector);
// 直接计算是否禁用：非admin用户则禁用按钮
const isDisabled = Authenticate.level !== 'admin';

<Link href="/stock" passHref>
  <ListItem
    button
    className={router.pathname === "/stock" ? "Mui-selected" : ""}
    disabled={isDisabled}
  >
    <ListItemIcon>
      <Layers />
    </ListItemIcon>
    <ListItemText primary="Stock" />
  </ListItem>
</Link>

额外需求：直接隐藏按钮（而非仅禁用） #

如果需要给非admin用户直接隐藏整个Stock按钮，用条件渲染即可：

const Authenticate = useSelector(userSelector);
const isAdmin = Authenticate.level === 'admin';

{isAdmin && (
  <Link href="/stock" passHref>
    <ListItem
      button
      className={router.pathname === "/stock" ? "Mui-selected" : ""}
    >
      <ListItemIcon>
        <Layers />
      </ListItemIcon>
      <ListItemText primary="Stock" />
    </ListItem>
  </Link>
)}

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