React TypeScript协变问题：派生组件数组无法匹配BaseFoo[]类型

你遇到的类型错误核心来自两个认知偏差：

• 第一，类型定义和实际传参不匹配：你定义的BaseFoo是函数组件本身的类型（即接收props返回React节点的函数类型），但你实际传入的是JSX语法调用组件后生成的ReactElement实例，二者属于完全不同的类型范畴。
• 第二，JSX表达式的默认推导规则：所有通过<Comp />形式生成的节点，TS默认会推导为通用的JSX.Element类型，不会自动反向追溯节点对应的源组件类型、props约束，因此你拿到的永远是Element[]，不可能自动匹配BaseFoo[]（组件函数数组）的要求。

你之前尝试的as强转、修改FC泛型定义等方案，都没有解决上述核心矛盾，自然无法生效。

根据你实际的业务场景二选一即可：

场景1：传入渲染完成的JSX元素数组（即你当前代码的写法） #

你需要修改OtherBar的入参类型，不再要求接收组件函数数组，而是接收props满足BaseFooProps约束的React元素数组，代码示例：

import React, { FC, ReactElement } from 'react';

interface BaseFooProps {
  name: string;
}
// 保留基础组件类型定义
type BaseFoo<T extends BaseFooProps = BaseFooProps> = FC<T>;
// 定义合法的基础组件元素类型：要求元素对应组件必须满足BaseFoo的类型约束，props至少包含BaseFooProps
type BaseFooElement = ReactElement<BaseFooProps, BaseFoo>;

interface OtherBarProps {
  items: BaseFooElement[]
}
const OtherBar: FC<OtherBarProps> = ({ items }) => <div>{items}</div>;

// 派生组件定义
interface AProps extends BaseFooProps {
  height: number;
}
const A: FC<AProps> = ({ name, height }) => <>{name}-{height}</>;

// 使用示例，此时TS会自动校验数组成员是否符合要求
const items = [
  <A name="demo" height={180} key="1" />,
  // 如果传入不满足要求的节点（比如不带name属性的普通div），TS会直接抛出类型错误
  // <div key="2">invalid</div>
];
<OtherBar items={items} />

场景2：传入组件函数本身的数组（未渲染的组件引用） #

如果你本来的需求是给OtherBar传组件引用，在组件内部自行渲染，那你不需要修改OtherBar的类型定义，只需要调整传参方式，不要用JSX语法调用组件，直接传入组件引用即可：

interface OtherBarProps {
  items: BaseFoo[]
};
const OtherBar: FC<OtherBarProps> = ({ items }) => {
  return (
    <div>
      {items.map((Comp, idx) => <Comp key={idx} name="defaultName" />)}
    </div>
  )
}

// 直接传组件函数引用，不要加<>调用
const componentList = [A, BaseFooComponent];
<OtherBar items={componentList} />

注意：尽量不要用as关键字强制跳过类型校验，这种方式会屏蔽TS的类型检查能力，后续如果传入不符合基础属性要求的节点，不会得到任何错误提示。

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