React useContext+TypeScript作用域错误：自定义Hook报错求助

你遇到的这个错误其实是个误判——你的组件确实在MyProvider内部，但自定义Hook里的判断逻辑把**状态的初始值undefined**当成了「没有在Provider中获取到Context」的情况。

咱们拆解一下代码逻辑：

• StateContext的初始值设为了undefined
• MyProvider里的state初始值也是undefined，所以StateContext.Provider提供的value就是undefined
• 当useMyMessage调用useContext(StateContext)时，拿到的是状态的初始值undefined，触发了if (!context)的错误判断，抛出了错误，但这和是否在Provider里无关，只是状态本身就是undefined而已。

我们需要区分「没有在Provider范围内」和「状态本身是undefined」这两种情况，这里有两种常用的修复方式：

方式一：用哨兵值标记未初始化的Context #

创建一个唯一的「哨兵值」（比如Symbol）作为StateContext的初始值，这样就能准确判断组件是否真的不在Provider内部：

// src/providers/myProvider.tsx
import React, { useState, useContext } from "react";
type MyProviderProps = { children: React.ReactNode };
type State = string | undefined;
type Dispatch = (value: State) => void;

// 创建一个唯一的哨兵值，用于标记未初始化的Context
const UNINITIALIZED = Symbol();
// 调整Context类型，允许哨兵值存在
const StateContext = React.createContext<State | typeof UNINITIALIZED>(UNINITIALIZED);
const DispatchContext = React.createContext<Dispatch | undefined>(undefined);

export function MyProvider({ children }: MyProviderProps) {
  const [state, dispatch] = useState<State>(undefined);
  return (
    <StateContext.Provider value={state}>
      <DispatchContext.Provider value={dispatch}>
        {children}
      </DispatchContext.Provider>
    </StateContext.Provider>
  );
}

export function useMyMessage() {
  const context = useContext(StateContext);
  // 只有当拿到哨兵值时，才判定为不在Provider内部
  if (context === UNINITIALIZED) {
    throw new Error("useMyMessage must be used within MyProvider");
  }
  return context;
}

这样一来，只有组件不在MyProvider内部时，useContext才会拿到UNINITIALIZED哨兵值，这时候才抛出错误；如果在Provider内部，即使state是undefined，也不会触发错误。

方式二：调整状态的初始值 #

如果你的业务逻辑允许，可以把state的初始值设置为非undefined的字符串（比如空字符串），这样就能直接通过undefined判断是否在Provider内部：

// src/providers/myProvider.tsx
export function MyProvider({ children }: MyProviderProps) {
  // 把初始值改为空字符串，替代undefined
  const [state, dispatch] = useState<State>("");
  return (
    <StateContext.Provider value={state}>
      <DispatchContext.Provider value={dispatch}>
        {children}
      </DispatchContext.Provider>
    </StateContext.Provider>
  );
}

export function useMyMessage() {
  const context = useContext(StateContext);
  // 此时只有不在Provider里时，context才会是undefined
  if (context === undefined) {
    throw new Error("useMyMessage must be used within MyProvider");
  }
  return context;
}

这种方式更简洁，但前提是你的业务逻辑接受state初始值为空字符串而不是undefined。

额外优化：把Dispatch也封装进自定义Hook #

既然已经封装了useMyMessage获取状态，不如把setMyMessage也一起封装进去，让组件代码更简洁：

export function useMyMessage() {
  const state = useContext(StateContext);
  const dispatch = useContext(DispatchContext);
  
  if (state === UNINITIALIZED || dispatch === undefined) {
    throw new Error("useMyMessage must be used within MyProvider");
  }
  
  return [state, dispatch] as const;
}

然后在组件里直接使用：

// src/components/MyComponent.tsx
import React from "react";
import { useMyMessage } from "../providers/myProvider";

export default function MyComponent() {
  const [myMessage, setMyMessage] = useMyMessage();
  return <div>{myMessage}</div>;
}

这样组件里就不需要单独导入DispatchContext了，使用起来更方便。

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