尽管存在null合并和可选链接，但属性不存在

Question

我有一段代码，我在上面进行可选的链接和null合并。

我不明白为什么它仍然抱怨房产不存在，如下面的图片所示

错误消息为

TS2339: Property 'drawer' does not exist on type '{}'.

export const AppBar = styled(BaseAppBar, {
shouldForwardProp: (prop) => prop !== "open",
})<AppBarProps>(({ theme }) => ({
zIndex: theme?.zIndex?.drawer ?? 2,
}));
AppBar.defaultProps = {
color: "primary",
};

图像

Answer 1

错误显示'drawer' does not exist on type '{}'，这意味着zIndex具有空对象的类型，您需要在theme内部全局定义zIndex的类型，或者使用as进行类型断言。

export const AppBar = styled(BaseAppBar, {
shouldForwardProp: (prop) => prop !== "open",
})<AppBarProps>(({ theme }) => ({
zIndex: (theme?.zIndex as { drawer: number }).drawer ?? 2,
}));