尽管 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的类型为空 object，您需要在theme内全局定义zIndex的类型或使用as来进行类型断言。

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