React+TS自定义组件条件返回JSX报FC类型不匹配错误如何解决

React.FC 类型的组件要求必须返回合法的 React 元素（ReactElement）或者 null，不能存在无返回值的情况。
你修改后的第二版代码只在 position 匹配 right/left/full/empty 四个值的分支下有返回语句，一旦传入的 position 不在这四个值范围内（比如拼写错误、传入其他自定义值），所有条件分支都不会命中，函数会隐式返回 undefined，不满足 React.FC 的类型约束，因此 TypeScript 抛出了类型不匹配的报错。你看到的报错信息里提到的Type '""' is not assignable to type 'ReactElement<any, any> | null'，就是TypeScript检测到组件存在返回空值的路径，推导出的返回值类型不符合React.FC的约束。
你第一版代码没有问题的原因是：cardOutput 初始值被赋值为合法的空 Fragment <></>，不管有没有命中条件分支，最后都会返回这个变量，永远符合返回值要求。

只要在所有条件分支的末尾增加兜底返回逻辑即可，同时可以优化重复调用 position.trim().toLowerCase() 的冗余逻辑，示例代码如下：

import React from 'react';
import './CardContainer.css';

interface ContainerProps {
    position?: string;
    content?: string;
}

const CardContainer: React.FC<ContainerProps> = ({ position = "right", content = "n/a" }) => {
    // 提前格式化position，避免重复计算
    const formatPosition = position.trim().toLowerCase();

    if (formatPosition === "right" ) {
        return <><div className="ion-float-right" >{content}</div><div className="clear-right"></div></>
    } else if (formatPosition === "left" ) {
        return <div className="ion-float-left">{content}</div>
    } else if (formatPosition === "full" ) {
        return <div className="">{content}</div>
    } else if (formatPosition === "empty" ) { 
        return <div className="">&nbsp;</div>
    }
    // 兜底返回：可以根据需求选择返回默认逻辑、空Fragment或者null
    // 这里和你第一版的默认行为保持一致，返回空Fragment
    return <></>
};

export default CardContainer;

如果希望非法 position 取值时抛出明确错误方便调试，也可以把兜底返回换成抛出错误的逻辑：

throw new Error(`不支持的position取值：${position}`)

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