TypeScript React扩展可辨识联合报IntrinsicAttributes不可赋值错误

你遇到的这个连锁类型报错本质上是两个推导偏差叠加导致的：

• 泛型版路由组件TestComponent的设计不符合TS的类型收窄逻辑：当你用泛型参数T extends AnyA作为props类型时，TS在编译期根本没法确定你在switch分支中匹配的类型和T的对应关系——它会认为T是任意满足约束的类型，甚至可能是跨类型的交叉结构，因此在向ASComponent/ANComponent传递props时会判定类型不兼容，最终连带抛出IntrinsicAttributes相关的诡异JSX报错。
• 数组遍历加onClick的写法没有利用TS的类型分布特性：原map回调的泛型会把所有数组元素当成一个整体的联合类型，最终推导出的onClick参数是string | number的交叉结果，而不是每个子类型对应自己的特化参数，完全达不到你想要的泛型特化效果。

1. 定义分布式的带onClick联合类型 #

不要把带onClick的类型做成需要手动传入泛型的结构，而是基于原有存储层的联合类型，自动生成分布展开的props类型，保证每个联合成员都有自己特化的onClick签名：

// 保留原有AWithClick的泛型定义
type AWithClick<T extends AnyA> = T & { onClick: (value: T['value']) => void }
// 新增：基于AnyA生成分布式的联合类型，自动拆分为每个子类型对应的AWithClick
type AnyAWithClick = AWithClick<AS> | AWithClick<AN>;

2. 重写路由组件，移除不必要的泛型 #

直接让路由组件接收AnyAWithClick作为props类型，TS会依靠判别联合的自动收窄逻辑，在每个switch分支中自动把props推导为对应子组件要求的参数类型，完全不需要手动写泛型路由：

const TestComponent = (props: AnyAWithClick) => {
  switch (props.type) {
    case AType.as: 
      // TS会自动在此处把props收窄为AWithClick<AS>，完全匹配ASComponent的入参要求
      return <ASComponent {...props} />;
    case AType.an: 
      // TS会自动在此处把props收窄为AWithClick<AN>，完全匹配ANComponent的入参要求
      return <ANComponent {...props} />;
  }
};

3. 修正数组遍历的类型推导 #

给加完onClick的数组显式标注为AnyAWithClick[]类型，借助TS的上下文推导能力，自动让每个数组元素匹配对应的特化onClick签名，不需要手动写分支或者重复声明类型：

const withoutClicks = [
  { type: AType.as, value: 'AS!' } as AS,
  { type: AType.an, value: 1 } as AN,
];

// 显式标注数组类型为AnyAWithClick[]，TS会自动推导map回调中onClick的参数类型
const withClicks: AnyAWithClick[] = withoutClicks.map(props => ({
  ...props,
  // 这里不需要手动标注value类型：TS会自动根据props的类型，把value推导为对应的string/number
  onClick: (value) => { console.log(value) },
}));

4. 列表渲染最佳实践修正 #

原代码中key={props.type}的写法在列表存在多个同类型元素时会出现key重复问题，建议改用稳定的唯一标识作为key，避免渲染警告（不影响类型检查，仅做工程规范提示）。

• 存储层的基础接口完全没有改动，没有把onClick这类UI层的逻辑硬加到数据结构中，满足你“组件props和存储层接口独立”的核心需求
• 每个对象的onClick签名会自动根据对应子接口特化，传入不兼容类型的参数时TS会直接报错
• 路由组件的props传递完全符合类型要求，不会再出现IntrinsicAttributes相关的连锁报错

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