为什么typescript无法识别上下文包装器提供的值?

Question

我正在尝试创建一个上下文包装器。将状态变量作为提供程序值传递，并尝试在ToolBar组件中使用useContext访问这些值。

type NavContextType = {
isDrawerOpen: boolean;
setIsDrawerOpen: React.Dispatch<React.SetStateAction<boolean>>;
};
export const NavContext = createContext<NavContextType | null>(null);
const NavBar: :ReactFC<ReactNode | undefined> = ({ children }) => {
const [isDrawerOpen, setIsDrawerOpen] = useState(false);
return (
<NavContext.Provider value={{ isDrawerOpen, setIsDrawerOpen }}>
<ToolBar />
</NavContext.Provider>
);
};

Toolbar.js:

import { NavContext } from "./NavBar";
const ToolBar = () => {
const { isDrawerOpen, setIsDrawerOpen } = useContext(NavContext);
return (
.......
.......
);
};

当我尝试使用const { isDrawerOpen, setIsDrawerOpen } = useContext(NavContext);访问上下文值时。我得到的打字错误如下:

TS2339: Property 'setIsDrawerOpen' does not exist on type 'NavContextType | null'.
Property 'isDrawerOpen' does not exist on type 'NavContextType | null'.

请指引我。

Answer 1

您需要使用as指令，例如useContext(NavContext) as NavContextType。Typescript会知道这个值不是空的。