Next.js使用easy-peasy调用useStoreState报getState未定义错误如何解决

问题根因 #

你触发的useStoreState must be used within a StoreProvider错误核心原因是Store.js文件未正确导出创建的store实例，导致_app.js中引入的store为undefined，StoreProvider没有接收到有效的状态存储实例，子组件自然无法读取到对应上下文。

修复步骤 #

1. 修正Store.js的导出逻辑 #

在Store.js中给store实例添加导出声明，修正后的代码如下：

import { createStore } from 'easy-peasy';

// 新增export声明，和你_app.js中的命名导入对应
export const store = createStore({
    activeStep: 1,
    step1Answers: { name: '', resp: '' },
});

如果你习惯用默认导出，可以把导出改为export default store，对应的_app.js中导入语句要改为import store from '../stores/Store'（去掉大括号即可）。

2. 校验文件名大小写 #

确认你的stores目录下的存储文件名称和导入时的大小写完全一致，Windows系统下文件名不区分大小写，但Linux环境和Next.js构建过程中会严格校验大小写，容易出现引入失败的问题。

3. 重启开发服务 #

修改完成后停止当前Next.js开发服务，重新执行npm run dev启动，避免本地缓存导致修改不生效。

验证 #

启动后打开首页即可看到正确输出的activeStep值1，控制台也不会再报上下文缺失错误。

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