Material-UI Autocomplete点击输入框报null的label属性读取错误

MUI Autocomplete 组件内置的getOptionLabel方法默认负责读取每个选项的显示文本，逻辑为：如果选项是字符串类型直接返回字符串本身，非字符串类型则读取选项的label属性。点击输入框时组件会展开下拉列表，遍历所有选项执行渲染前置逻辑，一旦遍历到值为null的选项，执行null.label操作就会抛出你看到的Uncaught TypeError: Cannot read properties of null (reading 'label')错误。
结合你提供的代码，触发报错的常见诱因有两个：

• ContactList数据源没有做空兜底，或者列表中存在空项，map生成选项数组时把null/undefined混入了options列表，比如某条联系人数据本身为null，使用可选链contact?.first_name做取值时就会返回undefined，最终进入选项列表触发报错。
• 部分版本的MUI在freeSolo模式下存在逻辑缺陷，如果没有显式传入getOptionLabel属性，输入框聚焦时会把内部暂存的null值当成正常选项走渲染逻辑，直接触发报错。

按以下步骤调整即可修复：

1. 先给数据源加兜底逻辑，保证传入的options永远是合法的字符串数组，从源头杜绝空值进入选项列表：

<Autocomplete
    id="free-solo-demo"
    freeSolo
    // ContactList为空时兜底为空数组，map后过滤掉所有假值
    options={(ContactList || []).map((contact) => contact.first_name).filter(Boolean)}
    renderInput={(params) => <TextField {...params} />}
/>

2. 显式传入getOptionLabel属性，对可能出现的空值做兼容处理，彻底避免读取空值属性的问题：

<Autocomplete
    id="free-solo-demo"
    freeSolo
    options={(ContactList || []).map((contact) => contact.first_name).filter(Boolean)}
    // 空选项统一返回空字符串
    getOptionLabel={(option) => option || ''}
    renderInput={(params) => <TextField {...params} />}
/>

3. 如果后续改为受控用法（绑定value和onChange），freeSolo模式下value的初始值不要设为null，设为空字符串''即可。

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