MUI Joy SelectProps泛型报错：需传入1-2个类型参数

问题原因 #

@mui/joy的SelectProps是泛型类型，要求传入1-2个类型参数，分别对应选项的类型和选中值的类型（第二个参数可选），直接使用SelectProps而不指定类型参数会触发TS报错。

具体修复方案 #

根据业务场景，常见修复方式如下：

1. 选项值为字符串类型（通用场景）

给SelectProps传入string类型参数，适配普通下拉选择需求：

import "./Select.styles.scss";
import JoySelect from "@mui/joy/Select";
import { SelectProps } from "@mui/joy";
import { ArrowDown2 } from "iconsax-react";

// 指定string类型参数
const Select = (props: SelectProps<string>) => {
  const required_star = props?.required === true ? <span className="requiredStar">*</span> : "";
  console.log(props.title, props.value);
  return (
    <div className="select-container">
      <p className="title">
        {props?.title} {required_star}
      </p>
      <JoySelect
        {...props}
        fullWidth
        indicator={<ArrowDown2 size={18} color="#90A0B7" />}
        sx={{
          height: 40,
          borderColor: "#334D6E",
          padding: "0px 10px",
          width: "100%",
        }}
        placeholder={`Select ${props.title}`}
        variant="outlined"
      />
    </div>
  );
};

Select.defaultProps = {
  size: "small",
  fullWidth: true,
};

export default Select;

2. 自定义选项对象类型

若下拉选项是带label和value的对象，先定义选项类型再传入：

// 定义自定义选项类型
type SelectOption = {
  label: string;
  value: string | number;
};

// 将自定义类型传入SelectProps
const Select = (props: SelectProps<SelectOption>) => {
  // 原有代码逻辑
};

3. 明确指定选中值的类型

如果选项类型和值类型不一致（比如选项是对象，值是对象的ID），可传入两个类型参数：

// 第一个参数为选项类型，第二个为选中值类型
const Select = (props: SelectProps<SelectOption, number>) => {
  // 原有代码逻辑
};

补充说明 #

@mui/joy的Select组件更侧重类型安全，通过泛型强制约束选项和值的类型；而@mui/material的SelectProps默认有类型参数兜底，这是切换组件后出现差异的核心原因。

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