如何修复TypeScript中“JSX元素类型无构造或调用签名”错误？

报错信息 #

JSX element type 'Icon' does not have any construct or call signatures.ts(2604)
'Icon' cannot be used as a JSX component. Its type 'Element' is not a valid JSX element type.ts(2786)

问题代码 #

配置文件 user-config.ts #

export interface UserConfig {
    text: string;
    value: string;
    icon?: JSX.Element;
}

export const userConfig: UserConfig[] = [
    {
        text: 'John',
        value: 'john-123',
        icon: UserIcon,
    },
    {
        text: 'Doe',
        value: 'doe-456',
        icon: UserIcon,
    },
];

组件文件 index.tsx #

<div>
    {userConfig.map(({ text, value, icon: Icon }, index) => (
        <div key={index} className="flex items-center justify-start flex-col">
            {Icon && <Icon />}
            <span data-user={value}>{text}</span>
        </div>
    ))}
</div>

修复方案 #

核心问题是类型定义不匹配：你把icon定义成了JSX.Element（组件渲染后的结果），但实际传入的是组件本身（比如UserIcon），而要作为JSX组件渲染，需要的是可调用的组件类型，不是已渲染的元素。

步骤1：修正接口类型 #

把icon的类型从JSX.Element改为以下两种之一：

• React.FC：仅支持函数组件，适合明确组件类型的场景
• React.ElementType：兼容函数组件、类组件、原生HTML标签，通用性更强

推荐使用ElementType，修改后的配置文件代码：

import type { ElementType } from 'react';

export interface UserConfig {
    text: string;
    value: string;
    icon?: ElementType;
}

export const userConfig: UserConfig[] = [
    {
        text: 'John',
        value: 'john-123',
        icon: UserIcon,
    },
    {
        text: 'Doe',
        value: 'doe-456',
        icon: UserIcon,
    },
];

步骤2：组件渲染逻辑保持不变 #

现在Icon是合法的组件类型，可以直接用<Icon />渲染，原组件代码无需修改。

进阶：支持传递组件Props #

如果你的Icon组件需要接收props（比如尺寸、颜色），可以在接口中指定组件的props类型：

import type { FC } from 'react';

// 定义Icon组件的props类型
interface IconProps {
    size?: number;
    color?: string;
}

export interface UserConfig {
    text: string;
    value: string;
    icon?: FC<IconProps>;
}

渲染时就能安全传递props：

{Icon && <Icon size={24} color="#666" />}

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