自定义MUI Select后onChange事件类型变为unknown的原因

问题根源 #

自定义CustomizeSelect时，没有为组件显式声明泛型参数，TypeScript无法自动推断SelectChangeEvent的泛型类型，因此默认 fallback 到unknown。而原生MUI Select内部已处理泛型传递，你的自定义TextField方式恰好保留了它的泛型推断逻辑，所以没出现类型问题。

修复方案 #

给自定义组件添加泛型定义，让它能接收并传递值的类型参数：

1. 定义带泛型的自定义组件 #

import { Select, SelectProps, SelectChangeEvent } from '@mui/material';

// 声明泛型T，对应Select的值类型，默认设为string适配常见场景
interface CustomizeSelectProps<T = string> extends SelectProps<T> {}

const CustomizeSelect = <T extends string | number | readonly string[]>(
  props: CustomizeSelectProps<T>
) => {
  return <Select {...props} />;
};

export default CustomizeSelect;

2. 使用时的类型处理 #

import CustomizeSelect from './CustomizeSelect';

// 自动推断类型为SelectChangeEvent<string>
const handleChange = (event: SelectChangeEvent<string>) => {
  console.log(event.target.value);
};

// 字符串值场景：TypeScript会自动推断类型
<CustomizeSelect onChange={handleChange}>
  <option value="option1">选项1</option>
  <option value="option2">选项2</option>
</CustomizeSelect>

// 数字值场景：显式指定泛型
<CustomizeSelect<number> onChange={(e) => console.log(e.target.value)}>
  <option value={1}>选项1</option>
  <option value={2}>选项2</option>
</CustomizeSelect>

为什么自定义TextField没问题？ #

TextField的onChange事件类型是ChangeEvent<HTMLInputElement>，本身不需要额外泛型（输入框值默认是string）；而Select的SelectChangeEvent依赖值的类型泛型，必须显式传递才能让TypeScript正确推断。

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