Next.js调用栈溢出错误求助（RTK Query相关）

核心问题定位 #

这个栈溢出问题大概率和RTK Query中间件数量过多引发的递归调用/循环依赖有关——非Safari浏览器的JS引擎对调用栈深度限制更严格，而Safari引擎容错性更高，因此未触发报错。

针对性排查与修复方案 #

1. 检查API注册的唯一性与循环依赖 #

• 动态生成API时，确保每个API的reducerPath是唯一值，避免多个API共用同一reducer路径，导致状态更新时触发循环调用
• 排查API的tag定义：如果存在TagA的invalidatesTags包含TagB，同时TagB的invalidatesTags又包含TagA的情况，会引发无限缓存更新递归，直接导致栈溢出

2. 优化RTK Query中间件数量 #

RTK Query默认会为每个API生成独立中间件，大量API同时注册会拉长中间件链，触发栈溢出。可以尝试：

• 使用combineApi合并多个API定义，减少中间件注册数量：

import { combineApi } from '@reduxjs/toolkit/query/react';
import userApi from './userApi';
import orderApi from './orderApi';

export const combinedApi = combineApi({
  reducerPath: 'rootApi',
  endpoints: (build) => ({
    ...userApi.endpoints,
    ...orderApi.endpoints,
  }),
});

• 检查store配置，确保RTK Query的中间件没有被重复注册

3. 隔离redux-persist与RTK Query的冲突 #

redux-persist持久化RTK Query缓存时，序列化/反序列化过程中的递归引用容易触发栈溢出：

• 在persist配置中排除RTK Query的reducer路径，避免持久化缓存状态：

import { persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage';

const persistConfig = {
  key: 'root',
  storage,
  blacklist: ['userApi', 'orderApi', /* 所有RTK Query的reducerPath */],
};

• 若需保留缓存，优先使用RTK Query自带的keepUnusedDataFor配置，替代redux-persist的持久化逻辑

4. 调整Next.js编译优化配置 #

在next.config.js中添加编译优化，减少递归调用的触发概率：

module.exports = {
  webpack: (config) => {
    config.optimization.concatenateModules = true;
    return config;
  },
};

验证步骤 #

• 打开浏览器开发者工具的Performance面板，录制报错触发时的调用栈，定位具体的递归函数（通常是RTK Query的缓存更新或中间件调度逻辑）
• 逐步减少API数量，定位到哪几组API组合会触发问题，针对性排查它们的定义是否存在异常

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