React中TypeScript泛型函数传递Ref时的类型交叉异常问题

我尝试创建一个简单的React包装组件，代码如下：

import React, { ComponentProps } from 'react'

const SomeWrapper = <C extends 'div' | 'a'>(Comp: C, ref: ComponentProps<C>['ref']) => {
  return <Comp ref={ref} />
}

我发现ref参数的推断类型是正确的联合类型，但Comp组件的ref属性却被推断为交叉类型，不清楚其中原因。我原本以为Comp和ref参数都来自泛型类型应该能正常工作，但实际并非如此。

注：我知道forwardRef通常用于此类场景，这只是问题的最小复现案例，无需提供处理Ref传递的其他方案建议。

这是因为TypeScript对泛型条件类型和JSX元素类型的处理逻辑存在差异：

• 泛型参数的分布式解析：当你通过ComponentProps<C>['ref']获取ref类型时，TypeScript会利用条件类型的分布式特性，把泛型C的联合类型（'div' | 'a'）拆成单个成员分别计算，最终得到React.Ref<HTMLDivElement> | React.Ref<HTMLAnchorElement>这个正确的联合类型，所以ref参数的类型是对的。

• JSX元素的交集类型计算：但在写<Comp ref={ref} />这个JSX表达式时，TypeScript不会把Comp的联合类型拆开处理。它会把Comp当作'div' | 'a'这个整体，然后去寻找所有成员的ref属性的共同类型——而div和a的ref类型没有交集，TypeScript就会把它们合并成交叉类型React.Ref<HTMLDivElement> & React.Ref<HTMLAnchorElement>（本质上等同于never，因为没有值能同时满足这两个类型）。

简言之，泛型条件类型会对联合类型做分发处理，但JSX的属性类型检查是基于联合类型的交集来计算，这就导致了两者的类型推断结果出现差异。

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