React Context类型报错：'isSearched'不存在于联合类型上

问题场景 #

你定义了如下Context相关类型：

export type SearchBooleanContextInterface = {
    isSearched: IsSearched,
    setIsSearched?: Dispatch<SetStateAction<IsSearched>>
}
export interface SearchPageContextInterface{
    value: string,
    payload: any,
    searchBoolean: SearchBooleanContextInterface
}
export const SearchPageContext = createContext<Partial<SearchPageContextInterface>>({});

并在Provider中设置了完整值：

<SearchPageContext.Provider value={{value: "", payload: "", searchBoolean: {isSearched, setIsSearched}}}>

但解构使用时出现类型错误：

const SearchPage = useContext(SearchPageContext);
const {searchBoolean} = SearchPage;
const {isSearched} = searchBoolean;
// 报错：Property 'isSearched' does not exist on type 'SearchBooleanContextInterface | undefined'

问题根源 #

核心原因是**Partial<SearchPageContextInterface>**带来的类型不确定性：
当用Partial包裹接口时，TypeScript会将所有属性标记为可选，也就是说SearchPageContext的实际类型是{ value?: string; payload?: any; searchBoolean?: SearchBooleanContextInterface }。

哪怕你在Provider中传入了完整的searchBoolean，TypeScript依然会考虑极端情况：如果组件没有被SearchPageContext.Provider包裹，调用useContext会返回初始的空对象{}，此时searchBoolean就是undefined，解构isSearched自然会触发类型错误。

解决方法 #

方法1：移除Partial，提供完整默认值 #

直接给createContext传入符合SearchPageContextInterface的完整默认值，彻底消除可选属性的不确定性：

// 先确保IsSearched类型已定义（示例假设为boolean）
type IsSearched = boolean;

export type SearchBooleanContextInterface = {
    isSearched: IsSearched,
    setIsSearched?: Dispatch<SetStateAction<IsSearched>>
}
export interface SearchPageContextInterface{
    value: string,
    payload: any,
    searchBoolean: SearchBooleanContextInterface
}
// 传入完整默认值，无需Partial
export const SearchPageContext = createContext<SearchPageContextInterface>({
    value: "",
    payload: "",
    searchBoolean: { isSearched: false } // 给isSearched一个合理默认值
});

之后使用时类型检查完全正常：

const SearchPage = useContext(SearchPageContext);
const { searchBoolean } = SearchPage;
const { isSearched } = searchBoolean;

方法2：使用时显式处理undefined #

如果不想修改上下文定义，可以在解构时用可选链+默认值或非空断言处理：

// 可选链+默认值（安全，兼容未被Provider包裹的情况）
const { searchBoolean } = SearchPage;
const { isSearched } = searchBoolean ?? { isSearched: false };

// 非空断言（仅当你能确保组件一定在Provider内使用时才用）
const { searchBoolean } = SearchPage;
const { isSearched } = searchBoolean!;

方法3：自定义Hook封装类型检查 #

写一个自定义Hook，强制组件必须在Provider内使用，否则抛出错误：

export const useSearchPageContext = () => {
    const context = useContext(SearchPageContext);
    if (!context || !context.searchBoolean) {
        throw new Error("useSearchPageContext must be used within a SearchPageContext.Provider");
    }
    return context as SearchPageContextInterface;
};

使用时直接调用这个Hook，类型完全安全：

const SearchPage = useSearchPageContext();
const { searchBoolean } = SearchPage;
const { isSearched } = searchBoolean;

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