Next.js+Redux构建报错：store解构为空或钩子不能条件使用

问题根源 #

报错TypeError: Cannot destructure property 'store' of 'useReduxContext2(...)' as it is null本质是组件未被Redux Provider包裹，或者Provider在组件渲染后才挂载，导致useAppSelector无法获取Redux上下文。而你用条件判断打断hooks调用顺序，违反了React Hooks规则（所有hooks必须在组件顶层、无条件调用）。

非条件判断的解决方案 #

1. 确保全局包裹Redux Provider #

在Next.js的_app.tsx（或_app.js，取决于Next.js版本）中，用Provider包裹所有页面组件，保证所有子组件都能访问Redux上下文：

// pages/_app.tsx（或app/_app.tsx）
import { Provider } from 'react-redux';
import { store } from '../app/store'; // 替换为你的store实际路径
import type { AppProps } from 'next/app';

export default function App({ Component, pageProps }: AppProps) {
  return (
    <Provider store={store}>
      <Component {...pageProps} />
    </Provider>
  );
}

2. 调整hooks调用顺序，统一判断状态 #

把所有useAppSelector移到组件最顶层调用，完成所有hooks调用后再统一判断是否显示Loading：

// 修正后的组件代码
const STATE = useAppSelector((state: RootState) => state);
const user = useAppSelector((state: RootState) => state.auth);

// 所有hooks调用完成后，再执行状态判断
if (!STATE) {
  return <LoadingPage />;
}

// 后续业务逻辑渲染代码

3. 优化状态判断逻辑（可选） #

没必要判断整个STATE是否存在，建议根据具体业务状态（比如用户认证信息是否加载完成）来判断：

const user = useAppSelector((state: RootState) => state.auth);

// 假设auth切片里有isLoaded字段标记初始化完成
if (!user.isLoaded) {
  return <LoadingPage />;
}

4. 检查Store初始化逻辑 #

确保Redux Store是同步创建的，避免异步初始化导致Provider挂载时Store未就绪：

// app/store.ts
import { configureStore } from '@reduxjs/toolkit';
import authReducer from '../features/auth/authSlice';

// 同步创建store，不要用异步函数包裹
export const store = configureStore({
  reducer: {
    auth: authReducer,
    // 其他reducer
  },
});

export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

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