TypeScript实现Context Api时dispatch方法报错：该表达式不可调用

常见原因及修复方案 #

1. Context类型定义不完整 #

这是最常见的问题：Context的类型未正确包含dispatch方法，导致TS无法识别其可调用性。

错误示例：

type AppState = { count: number };
// 仅定义了状态类型，未包含dispatch
const AppContext = createContext<AppState>({ count: 0 });

修复方式：
定义包含状态与dispatch的联合类型，并正确初始化Context：

type AppState = { count: number };
type AppAction = { type: 'INCREMENT' } | { type: 'DECREMENT' };
type AppContextType = {
  state: AppState;
  dispatch: React.Dispatch<AppAction>;
};

// 用null初始化（需符合类型定义）
const AppContext = createContext<AppContextType | null>(null);

在Provider中传入完整的state和dispatch：

function AppProvider({ children }: { children: React.ReactNode }) {
  const [state, dispatch] = useReducer(reducer, { count: 0 });
  return (
    <AppContext.Provider value={{ state, dispatch }}>
      {children}
    </AppContext.Provider>
  );
}

2. 未处理Context的空值情况 #

如果Context初始化时用了null/undefined，直接解构dispatch会被TS判定为可能不可用。

修复方式：
通过自定义Hook做非空校验，确保组件在Provider范围内使用Context：

function useAppContext() {
  const context = useContext(AppContext);
  if (!context) {
    throw new Error('useAppContext must be used within an AppProvider');
  }
  return context;
}

// 组件中使用
function Counter() {
  const { dispatch } = useAppContext();
  const handleAdd = () => dispatch({ type: 'INCREMENT' });
  return <button onClick={handleAdd}>+1</button>;
}

3. Reducer与Action类型不匹配 #

若dispatch传入的Action与定义的类型不一致，TS会间接判定dispatch不可调用。

修复方式：
确保reducer的Action参数类型与dispatch的类型完全对齐：

function reducer(state: AppState, action: AppAction): AppState {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    case 'DECREMENT':
      return { count: state.count - 1 };
    default:
      throw new Error('未知操作类型');
  }
}

4. 混淆useState与useReducer的dispatch #

如果Context中误传入了useState的setState函数（而非useReducer的dispatch），会因类型不匹配报错。

修复方式：
检查Provider的value值，确认传入的dispatch是useReducer返回的函数，而非useState的状态更新器。

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