盡管 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,
}));