如何在变量中存储任意React.FC？TypeScript类型报错解决

你遇到的问题是因为React.FC默认等价于React.FC<{}>，仅能接受无props的组件，而你的CompoA、CompoB都有自定义props类型，因此类型不兼容。以下是几种无需使用React.FC<any>的解决方案：

方案1：用泛型定义可适配任意props的类型 #

通过给CompoDefinition添加泛型参数，可以保留组件的props类型信息，同时支持任意函数组件：

import React from 'react';

type CompoDefinition<P = {}> = {
    Compo: React.FC<P>
}

type CompoAProps = {
    a: string
}
function CompoA(props: CompoAProps) {
    return <div>{props.a}</div>
}

type CompoBProps = {
    b: number
}
function CompoB(props: CompoBProps) {
    return <div>{props.b}</div>
}

// 存储CompoA时指定对应的props类型
const F: CompoDefinition<CompoAProps> = {
    Compo: CompoA
}

// 存储CompoB时指定对应的props类型
const G: CompoDefinition<CompoBProps> = {
    Compo: CompoB
}

方案2：用unknown定义通用组件类型 #

如果不需要保留组件的具体props类型，仅需存储任意函数组件，可以使用React.FC<unknown>（或更通用的React.ComponentType<unknown>，兼容类组件和函数组件）。unknown是TypeScript的安全顶级类型，不会触发代码检查工具的警告，同时比any更安全：

import React from 'react';

// 仅存储任意组件，不关心props类型
type CompoDefinition = {
    Compo: React.FC<unknown>
}

// 或者用ComponentType，支持类组件和函数组件
// type CompoDefinition = {
//     Compo: React.ComponentType<unknown>
// }

const F: CompoDefinition = {
    Compo: CompoA
}

const G: CompoDefinition = {
    Compo: CompoB
}

方案3：存储多个不同组件的集合 #

如果需要存储一组任意组件，可以结合方案2定义数组类型：

const components: CompoDefinition[] = [
    { Compo: CompoA },
    { Compo: CompoB }
]

注意事项 #

• 泛型方案适合需要后续正确传递props的场景，能保留类型校验
• unknown方案适合仅存储组件、无需直接操作props的场景，兼顾类型安全与灵活性
• 避免使用any，因为它会绕过TypeScript的类型检查，增加潜在bug风险

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