Next.js 16客户端调用嵌套服务端Action时首次正常后续失效问题咨询

这个问题的核心原因大概率出在你DropDownServices.ts里的模块级全局Map变量上。Next.js的服务端Action运行在服务器进程中，模块级别的变量会被所有请求共享复用。虽然你的代码里只初始化了一次urlKeyValueMap，但在开发环境的热重载、服务器进程状态复用等边缘场景下，这个Map可能会出现意外的状态异常（比如键值对丢失），导致后续调用urlKeyValueMap.get(urlKey)返回undefined，直接走了返回空数组的分支，自然不会发起Axios请求到目标端点。

而直接调用get()方法时，你直接传入了完整URL，绕开了这个全局Map的依赖，所以每次都能正常执行。

解决方案 #

方案1：把URL映射移到函数内部

将urlKeyValueMap的创建和初始化逻辑放到getDropDownList函数内部，这样每次调用Action时都会重新创建映射，彻底避免全局变量的共享问题：

'use server'
...
export async function getDropDownList<T>(urlKey: string): Promise<T>{
  // 每次调用都重新创建映射
  const urlKeyValueMap = new Map<string, string>();
  urlKeyValueMap.set("query1", "/lookup/query1");
  urlKeyValueMap.set("query2", "/lookup/query2");
  
  const url = urlKeyValueMap.get(urlKey);
  if(url) {
    const result = await get<any>(url);
    return result;
  } else {
    return [] as T;
  }
}

方案2：替换为普通对象字面量

普通对象比Map在模块级缓存中更稳定，不容易出现状态异常，你可以把映射改成对象：

'use server'
...
// 用普通对象替代Map
const urlKeyValueMap = {
  "query1": "/lookup/query1",
  "query2": "/lookup/query2"
};

export async function getDropDownList<T>(urlKey: string): Promise<T>{
  const url = urlKeyValueMap[urlKey];
  if(url) {
    const result = await get<any>(url);
    return result;
  } else {
    return [] as T;
  }
}

方案3：禁用服务端Action的缓存

虽然默认情况下服务端Action不会被缓存，但如果你的场景中存在意外的缓存触发（比如URL参数重复导致的缓存），可以显式禁用缓存：

'use server'
import { unstable_noStore as noStore } from 'next/cache';
...
export async function getDropDownList<T>(urlKey: string): Promise<T>{
  noStore(); // 禁用缓存
  const url = urlKeyValueMap.get(urlKey);
  // 后续逻辑不变
}

验证方法 #

你可以在getDropDownList里加个日志，看看后续调用时url的值是不是undefined：

export async function getDropDownList<T>(urlKey: string): Promise<T>{
  const url = urlKeyValueMap.get(urlKey);
  console.log(`urlKey: ${urlKey}, url: ${url}`); // 打印日志
  if(url) {
    const result = await get<any>(url);
    return result;
  } else {
    return [] as T;
  }
}

如果日志显示后续调用时url为undefined，那就坐实了是全局Map的状态问题，用上面的方案就能解决。

内容的提问来源于stack exchange，提问作者gene b.