求助：TypeScript函数联合类型参数被推断为交叉类型引发类型不兼容

你遇到的问题本质是TypeScript对函数联合类型的逆变处理：当定义两个参数不同的函数作为联合类型时，TypeScript会为了保证两种函数都能被安全调用，将参数类型推断为两个参数的交叉类型（也就是string & { displayValue: ReactNode; value: string }）——但这个交叉类型实际上不存在合法的值，所以传入string | 对象类型的参数必然报错。

这里提供两种可行的解决思路：

方案1：用泛型绑定参数类型 #

通过泛型明确组件接收的changeSelectedItem的参数类型，从根源上避免联合类型带来的逆变问题：

import { ReactNode, ChangeEvent } from 'react';

// 定义可选的选中值类型
type SelectValue = string | { displayValue: ReactNode; value: string };

// 泛型Props，将函数参数类型与组件绑定
type Props<T extends SelectValue> = {
  changeSelectedItem: (value: T) => void;
};

function Component<T extends SelectValue>({ changeSelectedItem }: Props<T>) {
  const onChange = (event: ChangeEvent<HTMLSelectElement> & { target: { value: T } }) => {
    const selectedValue = event.target.value;
    changeSelectedItem(selectedValue);
  };
  
  // ...组件其他逻辑
}

使用组件时，TypeScript会根据你传入的changeSelectedItem自动推断泛型T的类型，确保参数完全匹配。

方案2：添加类型守卫分支判断 #

如果必须保留原有的联合类型Props，可以通过类型守卫区分selectedValue的类型，让TypeScript在每个分支中识别出对应的函数类型：

import { ReactNode, ChangeEvent } from 'react';

type Props = {
  changeSelectedItem:
    | ((value: string) => void)
    | ((item: { displayValue: ReactNode; value: string }) => void);
};

function Component({ changeSelectedItem }: Props) {
  const onChange = (
    event: ChangeEvent<HTMLSelectElement> & {
      target: { value: string | { displayValue: ReactNode; value: string } };
    }
  ) => {
    const selectedValue = event.target.value;
    
    // 类型守卫：判断是否为对象类型的选中值
    if (typeof selectedValue === 'object' && selectedValue !== null) {
      changeSelectedItem(selectedValue);
    } else {
      changeSelectedItem(selectedValue as string);
    }
  };
  
  // ...组件其他逻辑
}

在类型守卫分支中，TypeScript会自动缩小changeSelectedItem的类型范围，确保参数与函数匹配，消除报错。

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