React TypeScript 参数'__0'与props类型不兼容错误如何解决

报错原因 #

该报错是TypeScript函数参数逆变规则导致的，和你定义的索引签名无关：

1. 你声明的FunctionComponent<IAcceptComponentProps>类型表示：该组件仅需接收包含onClick的属性即可，没有其他必填属性
2. 你的TestComponent显式要求入参必须包含name属性，对入参的约束比IAcceptComponentProps更严格
3. TypeScript判定如果将TestComponent赋值给该类型，后续调用组件时只会传入onClick，会缺失必填的name，因此抛出错误。同时FunctionComponent默认会带上children属性的类型定义，也可能加剧类型不匹配的问题。

修复方案 #

根据你的使用场景可以选择以下任意方案：

方案1：调整accept的类型定义（最推荐） #

如果你只需要约束传入组件必须接收onClick属性，不需要限制其他属性，直接修改IAccept的定义，避免使用带隐式children的FunctionComponent：

import type { ReactElement } from 'react';

export interface IAccept {
  [key: string]: (props: { onClick: () => void; [key: string]: any }) => ReactElement | null;
}

该写法明确要求组件必须能接收onClick属性，同时允许组件声明任意其他自有属性。

方案2：类型断言绕过校验 #

如果不想修改原有类型定义，可以在传值时用类型断言绕过逆变校验：

import type { FunctionComponent } from 'react';

<Container
  accept={{ 
    test1: TestComponent as FunctionComponent<IAcceptComponentProps>, 
    test2: TestComponent2 as FunctionComponent<IAcceptComponentProps> 
  }}
>

方案3：修改组件的必填属性 #

如果name不是TestComponent的必填属性，直接给name加可选标记即可：

// 给name加?标记设为可选
const TestComponent= ({ name, onClick}: { name?: any; onClick: () => void; }) => {
  // 组件逻辑
}

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