使用RTK Query查询时出现Cannot read properties of undefined (reading 'merge')错误

错误信息 #

Cannot read properties of undefined (reading 'merge') TypeError: Cannot read properties of undefined (reading 'merge')
at http://localhost:3000/static/js/bundle.js:4722:58
at updateQuerySubstateIfExists (http://localhost:3000/static/js/bundle.js:4650:5)
at http://localhost:3000/static/js/bundle.js:4719:9
at http://localhost:3000/static/js/bundle.js:6933:20
at produce (http://localhost:3000/static/js/bundle.js:166486:17)
at http://localhost:3000/static/js/bundle.js:6932:67
at Array.reduce ()
at reducer (http://localhost:3000/static/js/bundle.js:6913:25)
at reducer (http://localhost:3000/static/js/bundle.js:7014:14)
at combination (http://localhost:3000/static/js/bundle.js:159738:29)

问题描述 #

网络面板中能看到接口返回的响应数据，但控制台打印data为undefined，同时抛出上述错误。

相关代码 #

API 端点配置 #

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';

const token = localStorage.getItem('jwtToken');
export const brokerApi = createApi({
  baseQuery: fetchBaseQuery({
    baseUrl: process.env.REACT_APP_APP_URL,
    prepareHeaders: (headers, { getState }) => {
      headers.set('Authorization', `JWT ${token}`);
      return headers;
    },
  }),
  endpoints: (builder) => ({
    brokerAuthentication: builder.mutation({
      query: (id) => ({
        url: `/broker/auth`,
        method: 'POST',
        body: { key: id },
      }),
    }),
    brokerTransactions: builder.query({
      query: (brokerAddress) => ({
        url: `/broker-transactions?brokerAddress=${brokerAddress}`,
      }),
    }),
  }),
});

export const { useBrokerAuthenticationMutation, useBrokerTransactionsQuery } = brokerApi;

Redux Store 配置 #

import { configureStore } from '@reduxjs/toolkit';
import uiStateReducer from './uiState';
import { brokerApi } from '../query-services/brokerApi';
import { upiProviderApi } from '../query-services/upiProviderApi';

export default configureStore({
  reducer: {
    uiState: uiStateReducer,
    [brokerApi.reducerPath]: brokerApi.reducer,
    [upiProviderApi.reducerPath]: upiProviderApi.reducer,
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(
      brokerApi.middleware,
      upiProviderApi.middleware
    ),
});

组件中使用查询 #

// 组件代码省略
import { useBrokerTransactionsQuery } from '../query-services/brokerApi';

function Transactions() {
  const brokerAddress = useSelector(
    (state) => state.uiState.userState.brokerAddress
  );

  const { data, error, isLoading } = useBrokerTransactionsQuery(brokerAddress);
console.log(data)//显示undefined 
  // 组件剩余代码省略
}
// 组件代码省略

错误原因及解决方法 #

1. 初始查询参数为undefined #

组件初始化时，brokerAddress可能未完成加载，导致传递给查询的参数为空，RTK Query处理空参数时触发错误。

解决方法：添加参数校验，空值时跳过查询

const { data, error, isLoading } = useBrokerTransactionsQuery(brokerAddress, {
  skip: !brokerAddress
});

2. 响应数据解析异常 #

接口返回的响应格式不符合RTK Query预期（比如非JSON格式、结构嵌套异常），导致数据解析失败，进而触发merge错误。

解决方法：

• 检查接口响应的Content-Type是否为application/json
• 自定义响应处理逻辑，确保返回正确数据结构：

baseQuery: fetchBaseQuery({
  baseUrl: process.env.REACT_APP_APP_URL,
  prepareHeaders: (headers, { getState }) => {
    // 移到内部避免初始token为空
    const token = localStorage.getItem('jwtToken');
    if (token) {
      headers.set('Authorization', `JWT ${token}`);
    }
    return headers;
  },
  responseHandler: async (response) => {
    const data = await response.json();
    // 按需处理响应结构，确保返回可正常解析的数据
    return data;
  }
}),

3. 版本兼容性问题 #

旧版本RTK Query存在已知bug，可能导致该错误。

解决方法：更新到最新稳定版本

npm install @reduxjs/toolkit@latest
# 或
yarn add @reduxjs/toolkit@latest

4. 多API切片冲突 #

upiProviderApi的配置异常可能影响brokerApi的正常运行。

解决方法：临时移除upiProviderApi配置，测试是否还会报错，逐步排查冲突点。

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