TypeScript中如何为React组件指定类型？传递自定义SVG组件作为属性时遭遇TS2604错误的技术咨询

我来帮你搞定这个TypeScript类型问题！你遇到的JSX element type 'Icon' does not have any construct or call signatures错误，主要有两个原因：一是icon属性的类型定义不够规范，二是没处理icon可能为undefined的情况。下面是具体的修复方案：

1. 用React官方组件类型替代自定义函数类型 #

React提供了React.ComponentType类型，专门用来表示React组件（兼容函数组件和类组件），它能正确识别组件的构造/调用签名，完美解决TS2604错误。我们把icon的类型改成这个：

import style from "./logistics-item.module.css";
import React, { DetailedHTMLProps, LiHTMLAttributes, SVGProps } from "react"; // 记得导入React

export const LogisticsItem: React.FunctionComponent<
  DetailedHTMLProps<LiHTMLAttributes<HTMLLIElement>, HTMLLIElement> & {
    // 替换成ComponentType，自动适配SVG组件的props
    icon?: React.ComponentType<SVGProps<SVGSVGElement>>;
  }
> = ({ children, icon, ...rest }) => {
  const Icon = icon;
  return (
    <li className={style.item} {...rest}>
      <span className={style.icon}>
        {/* 处理icon为undefined的情况，避免渲染空标签报错 */}
        {Icon && <Icon />}
      </span>
      <span className={style.content}>{children}</span>
    </li>
  );
};

export default LogisticsItem;

2. 关键修改点说明 #

• 类型定义优化：React.ComponentType<SVGProps<SVGSVGElement>>明确告诉TypeScript，icon是一个接受SVG props的React组件，这比手动写的函数类型更准确，完全符合React组件的类型规范。
• 处理可选属性：因为icon是可选属性（带?），渲染时必须用{Icon && <Icon />}做条件判断，否则当icon未传入时，TypeScript会认为你在尝试渲染undefined，触发错误。

3. 验证修改后的用法 #

回到event-logistics.tsx，你的原有代码现在可以正常运行，不会再出现类型错误：

import { DateIcon } from "../../ui/icons/DateIcon";
import LogisticsItem from "./logistics-item";

<LogisticsItem icon={DateIcon}>
  <time>{humanReadableDate}</time>
</LogisticsItem>

额外优化（可选） #

如果你想给icon设置统一的默认props（比如尺寸、颜色），可以在渲染时传递：

{Icon && <Icon width={20} height={20} color="#666" />}

这样就能完美解决你遇到的类型问题啦！

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