解决TypeScript中引用AutocompleteProps嵌套属性类型报错问题

我定义了如下AutocompleteProps接口：

interface AutocompleteProps {
...
  slotProps?: {
    clearIndicator?: Partial<IconButtonProps>;
    paper?: PaperProps;
    popper?: Partial<PopperProps>;
    popupIndicator?: Partial<IconButtonProps>;
  };
}

我想在自己的接口里声明一个类型为slotProps.clearIndicator的属性，于是写了这段代码：

clearIndicatorSlotProps: AutocompleteProps<
    T,
    true,
    DisableClearable,
    FreeSolo
  >['slotProps']['clearIndicator'];

但这段代码无法正常运行，出现报错，该如何解决？

报错的核心原因是slotProps和clearIndicator都是可选属性（带有?标记），直接通过索引访问会触发TypeScript类型检查错误——因为TypeScript无法保证这两个属性一定存在。以下是几种可行的修复方式：

方法1：用NonNullable强制排除undefined #

通过NonNullable工具类型排除slotProps为undefined的情况，再安全访问clearIndicator：

clearIndicatorSlotProps: NonNullable<AutocompleteProps<T, true, DisableClearable, FreeSolo>['slotProps']>['clearIndicator'];

方法2：保留原类型的可选性 #

如果你的属性本身允许为undefined，可以直接兼容原类型的可选特性，有两种写法：

// 写法1：显式兼容undefined
clearIndicatorSlotProps: AutocompleteProps<T, true, DisableClearable, FreeSolo>['slotProps']?.['clearIndicator'] | undefined;

// 写法2：直接复用原类型定义（最简洁）
clearIndicatorSlotProps?: Partial<IconButtonProps>;

这种方式完全贴合原接口的设计逻辑，因为原clearIndicator就是可选的Partial<IconButtonProps>。

方法3：提前提取嵌套类型（适合多次复用） #

如果需要在多个地方使用这个类型，可以先单独提取出来，提升代码可读性：

// 提取slotProps的非空类型
type AutocompleteSlotProps = NonNullable<AutocompleteProps<T, true, DisableClearable, FreeSolo>['slotProps']>;
// 声明属性
clearIndicatorSlotProps: AutocompleteSlotProps['clearIndicator'];

内容的提问来源于stack exchange，提问作者Renaud is Not Bill Gates