React TypeScript中如何为createContext定义允许null的类型并解决报错？

问题原因 #

你定义的ModalContext类型为TModalContext | null，调用useModalContext返回的是这个联合类型。当尝试解构数组时，TypeScript无法确定返回值一定是数组（可能为null），因此抛出类型错误。

解决方案1：在自定义Hook中添加运行时检查与类型断言 #

修改useModalContext钩子，加入运行时校验确保组件必须在ModalProvider内部使用，同时让TypeScript推断出返回值为非null的数组类型：

import React, { useState } from 'react';

type TModal = boolean;
type TModalContext = [TModal, React.Dispatch<React.SetStateAction<TModal>>];

const ModalContext = React.createContext<TModalContext | null>(null);

const ModalProvider = ({ children }: { children: React.ReactNode }) => {
    const modalState = useState<TModal>(false);
    return <ModalContext.Provider value={modalState}>{children}</ModalContext.Provider>;
};

const useModalContext = () => {
    const context = React.useContext(ModalContext);
    // 运行时检查，强制组件在Provider内使用
    if (!context) {
        throw new Error('useModalContext 必须在 ModalProvider 组件内部使用');
    }
    return context;
};

此时调用const [isOpen, setOpen] = useModalContext();时，TypeScript会确认返回值为TModalContext类型，不会再报错。

解决方案2：提供符合类型的默认值 #

如果能确保所有使用useModalContext的组件都在ModalProvider内部，也可以直接给createContext提供一个符合TModalContext类型的默认值，避免联合null类型：

const ModalContext = React.createContext<TModalContext>([false, () => {}]);

这种方式无需额外运行时检查，但如果组件意外在Provider外使用，会拿到无意义的默认setter，需根据业务场景选择。

内容的提问来源于stack exchange，提问作者Epple