Next.js使用react-redux的useDispatch时触发Invalid Hook call报错

你当前贴出的组件代码本身符合Hook调用规则，Hook都写在组件函数顶层、组件名首字母大写，不存在语法层面的问题。出现仅useDispatch报错的情况，核心原因集中在以下两类：

依赖多副本/版本不匹配 #

这是该场景下最高发的原因：

• useState是React内置导出的Hook，只要当前页面加载的React实例合法即可正常运行
• useDispatch是react-redux导出的Hook，如果项目依赖树中存在多份React副本、或者多份react-redux副本，会导致react-redux内部运行时依赖的React实例，和页面组件使用的React实例不是同一个，直接触发Hook合法性校验失败。

排查修复步骤：

• 在项目根目录执行命令检查依赖版本：

  npm ls react
  npm ls react-redux
  

• 如果输出结果中存在嵌套安装的多版本react、或多版本react-redux，先删除node_modules文件夹和对应锁文件（package-lock.json/yarn.lock/pnpm-lock.yaml），重新执行包安装命令完成依赖去重。
• 版本兼容校验：如果你的项目使用React 18，必须搭配v8.x及以上版本的react-redux，版本不兼容也会触发同类报错。

Provider配置位置错误 #

你提到已经完成Provider和store的配置，但配置位置不符合Next.js的渲染要求时也会触发报错，根据你使用的路由模式对应检查：

• Pages Router模式：Provider必须配置在pages/_app.js文件中，作为全局根组件包裹<Component {...pageProps} />，不能仅在单个业务页面内引入Provider包裹局部内容。
• App Router模式：包含Provider的Redux配置文件必须在顶部添加'use client'指令声明为客户端组件，再引入到根布局app/layout.js中包裹全局内容，否则服务端组件环境下Redux Hook无法正常运行。

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