React组件用switch-case出现“无法作为JSX组件使用”警告的原因及解决

这个警告的核心原因是TypeScript的类型检查逻辑差异：

你的TextComp组件里，text参数被定义为string类型，意味着它可以是任意字符串。在switch-case结构中，你只处理了"A"和"B"两种情况，但如果传入其他字符串，函数会默认返回undefined——而JSX组件要求必须返回合法的React元素（如<Text>）、null这类有效值，TypeScript检测到这种潜在的无返回值风险，就会抛出警告。

反观if-else结构，你用else兜底了所有剩余情况，不管text是什么值，函数都会返回一个JSX元素，TypeScript能确定返回类型完全合法，因此不会触发警告。

两种消除警告的正确写法 #

方法1：添加default分支，确保总有返回值

给switch加上default case，返回一个合法的JSX元素或null，覆盖所有未明确处理的情况：

const TextComp = ({ text }: { text: string }) => {
    switch (text) {
        case "A":
            return <TextOne />
        case "B":
            return <TextTwo />
        default:
            // 可根据需求返回null、默认提示组件等
            return null
    }
}

方法2：限制text的类型为联合类型，覆盖所有可能值

如果text实际只会是"A"或"B"，直接把参数类型改成"A" | "B"，让TypeScript明确知道所有可能的取值，此时switch已经覆盖了全部情况，不会存在无返回值的风险：

const TextComp = ({ text }: { text: "A" | "B" }) => {
    switch (text) {
        case "A":
            return <TextOne />
        case "B":
            return <TextTwo />
    }
}

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