MUI AutocompleteProps泛型报错：需4-5个类型参数，如何解决？

错误原因 #

AutocompleteProps是Material-UI提供的多参数泛型类型，要求传入4到5个类型参数：

1. 选项的类型T
2. 是否多选的布尔类型Multiple
3. 是否禁用清除按钮的布尔类型DisableClearable
4. 是否允许自由输入的布尔类型FreeSolo
5. 可选的Chip组件类型ChipComponent

你只传入了T，不符合泛型参数的数量要求，因此触发报错。

修复方案 #

我们需要给自定义组件添加对应泛型参数，同时修改autoCompleteProps的类型，将renderInput从必填改为可选：

import { Autocomplete, AutocompleteProps, TextField } from '@mui/material';
import React from 'react';

// 定义组件泛型参数，对应AutocompleteProps的5个泛型并设置默认值
type AutoCompleteProps<T, Multiple extends boolean = false, DisableClearable extends boolean = false, FreeSolo extends boolean = false, ChipComponent = never> = {
  // 重定义autoCompleteProps，将renderInput改为可选
  autoCompleteProps?: Omit<AutocompleteProps<T, Multiple, DisableClearable, FreeSolo, ChipComponent>, 'renderInput'> & 
                       Partial<Pick<AutocompleteProps<T, Multiple, DisableClearable, FreeSolo, ChipComponent>, 'renderInput'>>;
  label: string;
  loading?: boolean;
};

const AutoComplete = <T, Multiple extends boolean = false, DisableClearable extends boolean = false, FreeSolo extends boolean = false, ChipComponent = never>({
  autoCompleteProps,
  label,
  loading,
}: AutoCompleteProps<T, Multiple, DisableClearable, FreeSolo, ChipComponent>) => {
  // 提供默认的renderInput实现，确保组件可用性
  const defaultRenderInput = (params: any) => (
    <TextField {...params} label={label} disabled={loading} />
  );

  return (
    <Autocomplete
      {...autoCompleteProps}
      // 优先使用用户传入的renderInput，否则用默认实现
      renderInput={autoCompleteProps?.renderInput || defaultRenderInput}
      loading={loading}
    />
  );
};

关键说明 #

1. 泛型参数默认值：给泛型参数设置默认值后，用户使用组件时无需手动传入所有泛型，仅需指定选项类型T即可（如<OptionType>）
2. renderInput可选处理：通过Omit移除原类型中必填的renderInput，再用Partial将其重新添加为可选属性
3. 默认渲染逻辑：组件内部提供默认的renderInput实现，结合传入的label和loading状态，保证用户未传入renderInput时组件仍能正常工作

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