React导入FC出现ts(2604)错误：JSX element type 'Element'无构造或调用签名

根因定位 #

你遇到的类型报错本质是高阶组件（HOC）包装后的组件类型推导问题：

• 组件内部的Props类型合并了mapDispatchToProps挂载的方法、withI18n和withStripeElements注入的属性
• 经过compose包装导出的组件，TS没有自动过滤掉已经由HOC注入的属性，会要求调用方传入所有Props定义的字段，而你调用时仅传入了业务自定义字段，因此触发类型错误。

解决方案 #

方案1：显式断言导出组件的对外属性（最快生效） #

直接在导出时声明组件对外仅暴露需要外部传入的ICreditCardDialogProps类型即可，修改导出部分代码：

export default compose(
  withI18n(),
  connect(null, mapDispatchToProps),
  withStripeElements
)(CreditCardDialog) as React.FC<ICreditCardDialogProps>;

方案2：拆分内外属性定义 #

将外部传入属性和HOC注入属性拆分定义，避免对外暴露内部注入属性：

// 对外暴露的属性，仅包含需要外部传入的字段
export interface ICreditCardDialogProps {
  paymentAmount: string;
  verifiedOrganizationId: string;
  onSuccess: () => void;
  title: string;
  subTitle: string;
}

// 组件内部使用的属性，合并所有HOC注入的字段
type InternalProps = ICreditCardDialogProps & withI18nProps & IWithStripeElements & typeof mapDispatchToProps;

const CreditCardDialog: FC<InternalProps> = (props) => {
  // 原有组件逻辑不变
}

方案3：检查类型包版本兼容性 #

确保类型包版本匹配你的React版本：

• 你使用的React 17.0.2对应@types/react 17.0.6是正确的
• 额外检查@types/react-redux版本是否和你安装的react-redux大版本匹配，版本不兼容会导致connect的类型推导失效。

排查验证 #

修改后重新编译，如果之前TS提示缺失的是showToastr、toggleDialog或者i18n、stripe相关属性，说明问题已经解决。

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