Redux useAppSelector解构users报错求助：Uncaught TypeError排查

遇到的错误：Uncaught TypeError: Cannot destructure property 'users' of '(0 , _redux_hooks__WEBPACK_IMPORTED_MODULE_11__.useAppSelector)(...)' as it is undefined.，出现在const { users } = useAppSelector(state => state.users)代码行，虽然TypeScript能正确推断users的类型，但运行时state.users为undefined。

以下是具体排查和解决方向：

• 优先检查Redux Provider配置
  这是最常见的触发原因：如果根入口文件（比如index.tsx）没有用Provider组件包裹App，useAppSelector根本无法获取到Redux store，返回结果自然是undefined。
  确保入口文件代码类似如下结构：

  import React from 'react';
  import ReactDOM from 'react-dom/client';
  import { Provider } from 'react-redux';
  import store from './redux/store';
  import { App } from './App';
  
  const root = ReactDOM.createRoot(document.getElementById('root')!);
  root.render(
    <Provider store={store}>
      <App />
    </Provider>
  );
  

• 给selector返回值加兜底逻辑
  即使Provider配置正确，也可以在解构时做一层兜底，避免运行时报错：

  // 方式1：给selector返回值加默认对象
  const { users } = useAppSelector(state => state.users || { users: [] });
  // 方式2：解构时直接给users设默认值
  const { users = [] } = useAppSelector(state => state.users) || {};
  

• 验证store初始化状态
  在store文件末尾添加打印，确认初始状态是否包含users字段：

  // store.js文件末尾
  console.log('初始store状态:', store.getState());
  

  如果输出中没有users字段，说明reducer未正确注册到store，检查configureStore的reducer配置，确保usersReducer确实是从slice文件导出的正确reducer。

• 修正slice中的拼写错误
  注意到slice里的状态值fullfilled是拼写错误，正确应为fulfilled（少了一个字母l），虽然这不会直接导致当前报错，但会影响后续状态判断逻辑，建议修正。

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