在TS文件中使用Redux Toolkit报错：TypeError: Cannot read properties of null (reading 'useContext')

错误原因 #

这个错误的核心是违反了React Hooks的使用规则：useDispatch作为React Hooks，必须在React函数组件的顶层作用域或自定义Hooks中调用，不能在以下场景使用：

• 文件顶层作用域直接调用
• 普通工具函数（非组件、非自定义Hooks）内部调用
• 服务端渲染（如Next.js的getServerSideProps/getStaticProps）的服务端逻辑中调用

当useDispatch在上述非法场景执行时，React无法找到Redux Provider提供的上下文，导致底层依赖的useContext函数读取到null，进而抛出该错误。

解决方法 #

根据不同代码场景，对应不同修复方式：

场景1：在组件外部直接调用useDispatch #

将useDispatch和dispatch调用移到React函数组件的顶层作用域内：

// 正确示例：在React组件内部使用useDispatch
import { useDispatch } from "react-redux";
import { actionFromSlice } from "../../actionss.ts";

export default function MyComponent() {
  // 必须在组件顶层调用useDispatch
  const dispatch = useDispatch();

  const triggerAction = () => {
    dispatch(actionFromSlice('a'));
  };

  return (
    <button onClick={triggerAction}>触发Redux动作</button>
  );
}

场景2：在工具函数中需要使用dispatch #

不要在工具函数内调用useDispatch，改为通过参数传入dispatch的方式：

// 工具函数文件 utils.ts
import { actionFromSlice } from "../../actionss.ts";
import type { Dispatch } from "@reduxjs/toolkit";

// 接收dispatch作为参数
export function executeAction(dispatch: Dispatch) {
  dispatch(actionFromSlice('a'));
}

// React组件中调用工具函数
import { useDispatch } from "react-redux";
import { executeAction } from "./utils.ts";

export default function MyComponent() {
  const dispatch = useDispatch();

  const handleClick = () => {
    executeAction(dispatch);
  };

  return <button onClick={handleClick}>执行动作</button>;
}

场景3：Next.js服务端渲染场景 #

如果是在Next.js的服务端函数（如getServerSideProps）中需要触发Redux逻辑，不要使用React Hooks，直接创建Redux store实例并调用dispatch：

// Next.js页面文件
import { store } from "../store"; // 导入你的Redux store实例
import { actionFromSlice } from "../../actionss.ts";

export async function getServerSideProps() {
  // 直接使用store的dispatch方法
  store.dispatch(actionFromSlice('a'));

  return { props: {} };
}

export default function MyPage() {
  // 组件内正常使用useDispatch
  const dispatch = useDispatch();
  return <div>页面内容</div>;
}

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