Next.js 14.2.3中onSubmit内upsertSubAccount返回值为undefined问题

核心原因 #

你的问题本质是客户端与服务端运行环境的隔离，以及异步调用未正确处理导致的：

1. 环境隔离限制
   Next.js严格分离客户端（浏览器）和服务端（Node.js）运行环境，服务端函数的代码不会被打包到客户端 bundle 中。当你在客户端组件中调用服务端函数时，Next.js会自动将其转换为异步RPC请求（远程过程调用），而非直接执行函数代码。

2. 异步调用未处理
   你在onSubmit中直接同步调用服务端函数，没有使用await等待异步请求完成。此时你获取到的不是服务端返回的实际对象，而是一个未完成的Promise——如果代码没有处理这个Promise，就会误以为返回值是undefined。

3. 服务端函数的执行与返回传递
   服务端函数确实在服务端正常执行了（所以数据库写入成功、服务端能打印正确对象），但客户端没有等待异步请求结束就去读取结果，自然拿不到返回值。

错误与正确调用示例 #

错误调用（你的当前写法）

// 客户端组件
import { upsertSubAccount } from '@/server/functions';

const handleSubmit = (e) => {
  e.preventDefault();
  const formData = collectFormData();
  const result = upsertSubAccount(formData); // 未加await，拿到的是Promise而非实际值
  console.log(result); // 输出undefined或Promise对象
};

正确调用（处理异步）

// 服务端函数文件（需标记'use server'）
'use server';
import prisma from '@/lib/prisma';

export async function upsertSubAccount(data) {
  const account = await prisma.subAccount.upsert({
    where: { id: data.id },
    update: data,
    create: data,
  });
  console.log(account);
  return account;
}

// 客户端组件
import { upsertSubAccount } from '@/server/functions';

const handleSubmit = async (e) => {
  e.preventDefault();
  const formData = collectFormData();
  const result = await upsertSubAccount(formData); // 必须加await等待RPC请求完成
  console.log(result); // 正确获取服务端返回对象
};

推荐方案：Form Action #

既然你打算尝试Form Action，这是Next.js 13+处理表单提交的官方推荐方式，它自动处理了客户端与服务端的通信，无需手动处理异步：

// 服务端Action函数
'use server';
import prisma from '@/lib/prisma';

export async function upsertSubAccountAction(formData: FormData) {
  const data = Object.fromEntries(formData);
  const account = await prisma.subAccount.upsert({
    where: { id: data.id },
    update: data,
    create: data,
  });
  return account;
}

// 客户端组件
'use client';
import { upsertSubAccountAction } from '@/server/functions';

export default function SubAccountForm() {
  return (
    <form action={upsertSubAccountAction}>
      <input type="text" name="name" placeholder="子账户名称" />
      <input type="hidden" name="id" value="xxx" />
      <button type="submit">保存</button>
    </form>
  );
}

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