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

Question

I have a piece of code on which I do optional chaining and also null coalescing.

I don't understand why it still complains about property not existing as shown in the image below

The error message is

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",
};

Image

Answer 1

The error says 'drawer' does not exist on type '{}' , that's mean the zIndex has the type of empty object, you need to define the type of zIndex inside the theme globally or use as to do type assertion.

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