Next.js 14.1.4中Server Action的getURL意外返回Promise而非字符串

升级Next.js到14.1.4版本后，在客户端组件调用checkoutWithStripe时发现，原本返回字符串的getURL函数现在返回了Promise类型，14.1.0版本中该函数工作正常。

代码示例 #

"use server";
export const getURL = (path: string = "") => {
  const url =
    process.env.NODE_ENV == "development"
      ? "http://localhost:3000/"
      : "https://ubenai.com/";

  url = url.replace(/\/+$/, "");
  path = path.replace(/^\/+$/, "");

  return path ? `${url}/${path}` : url;
};

export async function checkoutWithStripe() {
  // ...其他逻辑
  const url = getURL();
  console.log(url);
}

当前实际输出 #

Promise {
    'http://localhost:3000/',
    [Symbol(async_id_symbol)]: 771646,
    [Symbol(trigger_async_id_symbol)]: 771307,
    ...（省略其余Symbol内容）
  }

预期输出 #

http://localhost:3000/

问题原因与解决方案 #

原因

Next.js 14.1.4对Server Actions的处理逻辑做了调整：所有标记了"use server"的模块中的函数，无论是否声明为async，都会被自动包装成异步的Server Action，因此getURL现在返回Promise，而非直接返回字符串。

解决方案

有两种可行的解决方式：

1. 迁移工具函数到普通模块：将getURL移出带有"use server"的文件，放到普通工具文件中（比如utils/url.ts）。因为getURL只是纯字符串处理逻辑，不需要服务器端权限，完全可以作为客户端/通用工具函数使用。
2. 调用时添加await：如果必须将getURL留在"use server"模块中，调用时需要用await获取实际返回值：

   export async function checkoutWithStripe() {
     // ...其他逻辑
     const url = await getURL(); // 添加await
     console.log(url);
   }
   

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