MUI5 Autocomplete组件ListboxComponent与ListboxProps的TS类型问题

问题核心 #

在MUI5中使用Autocomplete组件，传入带forwardRef的自定义ListboxComponent并通过ListboxProps传递额外参数（比如无限加载的loadMore方法）时，TypeScript会因为默认类型不包含自定义属性而报错，即便功能能正常运行。

解决方案 #

1. 扩展ListboxProps类型

结合MUI原生的Listbox属性和自定义属性，定义新的类型：

import { ListboxProps as MuiListboxProps } from '@mui/material/Listbox';

// 合并原生属性与自定义属性
type CustomListboxProps = MuiListboxProps & {
  loadMore?: () => void; // 你的自定义属性，比如无限加载方法
};

2. 用forwardRef定义符合类型的自定义组件

确保组件接收扩展后的Props，并正确转发ref：

import Listbox from '@mui/material/Listbox';
import ListItem from '@mui/material/ListItem';
import ListItemText from '@mui/material/ListItemText';
import React from 'react';

const CustomListbox = React.forwardRef<HTMLUListElement, CustomListboxProps>(
  ({ children, loadMore, ...restProps }, ref) => {
    return (
      <Listbox ref={ref} {...restProps}>
        {children}
        {/* 渲染自定义逻辑，比如加载更多按钮 */}
        {loadMore && (
          <ListItem button onClick={loadMore}>
            <ListItemText primary="加载更多" />
          </ListItem>
        )}
      </Listbox>
    );
  }
);

3. 给Autocomplete传递自定义属性

此时再通过ListboxProps传参，TypeScript就能识别自定义属性的类型：

import Autocomplete from '@mui/material/Autocomplete';
import TextField from '@mui/material/TextField';

<Autocomplete
  options={options}
  renderInput={(params) => <TextField {...params} label="示例" />}
  // 指定自定义Listbox组件
  ListboxComponent={CustomListbox}
  // 传递自定义属性，TS不再报错
  ListboxProps={{
    loadMore: () => {
      // 你的无限加载逻辑
      console.log('加载更多数据');
    },
  }}
/>

原理说明 #

MUI默认的ListboxProps类型仅包含原生Listbox的属性，自定义属性不在其类型范围内。通过扩展类型并在forwardRef中使用该类型，能让TypeScript识别自定义参数，消除类型错误，同时不影响原有功能。

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