ReactJS中常规if-else语句触发SonarQube错误求助

问题背景 #

使用Material-UI的Typography组件时，通过变量传递variant属性触发了SonarQube错误，尝试多种写法均未解决：

尝试写法1 #

let titleHeader;
if (mobileDevice) {
  titleHeader = "h5";
} else {
  titleHeader = "h4";
}

尝试写法2 #

let titleHeader: any = "h4";
if (mobileDevice) {
  titleHeader = "h5";
}

变量使用场景：

<Typography variant={titleHeader}>Title</Typography>

直接在标签内使用三元运算符，错误依旧。

问题原因 #

SonarQube的错误源于变量类型未匹配Typography组件variant属性的合法取值范围。Material-UI的variant只接受特定的字符串字面量类型（如"h4"、"h5"等），未约束类型的变量或any类型会被SonarQube判定为潜在风险。

修复方案 #

方案1：用组件Props类型约束变量 #

通过Material-UI提供的类型定义，明确变量为variant允许的类型：

import type { TypographyProps } from '@mui/material/Typography';

let titleHeader: TypographyProps['variant'] = "h4";
if (mobileDevice) {
  titleHeader = "h5";
}

方案2：直接使用类型安全的三元表达式 #

简化逻辑，在JSX内直接写类型合规的条件判断：

<Typography variant={mobileDevice ? "h5" : "h4"}>Title</Typography>

方案3：定义常量集合复用取值 #

如果需要多处复用这些标题级别，可提前定义带类型的常量：

const HEADING_VARIANTS = {
  DESKTOP: "h4" as const,
  MOBILE: "h5" as const
};

<Typography variant={mobileDevice ? HEADING_VARIANTS.MOBILE : HEADING_VARIANTS.DESKTOP}>Title</Typography>

以上写法均能满足TypeScript类型检查要求，同时通过SonarQube的规则扫描，避免了任意字符串带来的潜在问题。

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