配置嵌套Store结构时添加RTK-Query中间件出现TS2322错误如何解决

RTK Query 的 API 实例依赖 reducerPath 配置定位自身 reducer 在 Store 中的挂载位置。默认场景下 API reducer 挂载在 Store 根层级，reducerPath 直接作为根节点的 key 即可正常匹配。当你把 reducer 放到嵌套的子 reducer 节点中时，reducerPath 没有同步更新为完整的嵌套路径，中间件校验状态类型、读取缓存数据时找不到对应路径，就会抛出类型不匹配的 TS2322 错误。

另外你给出的示例中还存在一处潜在笔误：定义的 API 实例为 myFooApi，但添加的中间件是 tokenListsApi.middleware，如果二者不是同一个实例，也会触发类型不匹配报错。

方案1：将 API reducer 挂载到根层级（官方推荐） #

RTK 官方默认推荐所有 API reducer 直接挂载在 Store 根节点，无需额外配置即可正常运行，也是你验证过的可用写法：

export const rootReducer = combineReducers({
  foo: fooReducer,
  bar: barReducer,
  [myFooApi.reducerPath]: myFooApi.reducer,  
});

const store = configureStore({
  reducer: rootReducer,
  middleware: (getDefaultMiddleware) => 
    getDefaultMiddleware().concat(myFooApi.middleware)
});

方案2：保留嵌套结构，同步修改 reducerPath 配置 #

如果业务需要必须保留嵌套结构，需要在调用 createApi 时将 reducerPath 修改为完整的嵌套路径（用点分隔），保证和实际挂载路径一致：

// 创建 API 时指定完整嵌套路径
const myFooApi = createApi({
  reducerPath: 'nested.myFooApi', // 对应 state.nested.myFooApi 的完整路径
  baseQuery: fetchBaseQuery({ baseUrl: '/' }),
  endpoints: () => ({}),
})

// 嵌套挂载 reducer
export const rootReducer = combineReducers({
  foo: fooReducer,
  nested: combineReducers({
    bar: barReducer,
    ['myFooApi']: myFooApi.reducer, // 与 reducerPath 后缀保持一致
  })
});

const store = configureStore({
  reducer: rootReducer,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(myFooApi.middleware)
});

注意：方案2要求路径完全匹配，写错任意节点都会触发类型或运行时错误，非必要场景优先选择方案1。

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