NextJS Server Actions调用MySQL接口报错及无响应问题排查

错误原因 #

你用错了返回方式——NextResponse是给API路由和中间件用的，Server Actions不能返回NextResponse实例。Server Actions的返回值会直接序列化后传递给客户端组件，而NextResponse是一个类对象，不符合Next.js规定的「只能传递纯对象、基础类型（字符串/数字/布尔等），不能传递类实例或无原型对象」的规则，所以触发了那个报错。

修复步骤 #

1. 修改Server Action的返回逻辑，直接返回纯对象

把actions.js里的NextResponse.json替换成普通对象返回，状态信息可以作为字段包含在返回对象中：

"use server";
import { createConnection } from "@/db";
// 删除NextResponse的导入
export async function login(data) {
  const { email, password } = data;
  try {
    const db = await createConnection();
    const [user] = await db.query(
      "SELECT id,firstName,lastName, image,DATE_FORMAT(birth_date, '%Y-%m-%d') as birthDate,gender, position, email, role, password,status FROM `users` WHERE email = ? AND status = 'approved'",
      [email]
    );
    if (user.length == 0) {
      // 直接返回带状态的纯对象
      return { success: false, message: "Invalid credentials.", status: 400 };
    }
    // 返回用户数据并标记成功状态
    return { success: true, data: user };
  } catch (error) {
    return { success: false, error: error.message, status: 500 };
  }
}

2. 客户端组件正确处理返回值

原来的handleSubmit直接传login无法处理返回结果，改成异步回调函数，手动获取并处理Server Action的返回值：

"use client";
import { useForm } from "react-hook-form";
import { login } from "../actions";
const LoginForm = () => {

  const form = useForm({
    defaultValues: {
      email: "",
      password: "",
    },
    reValidateMode: "onSubmit",
  });

  const { handleSubmit } = form;

  // 自定义异步提交逻辑，处理返回结果
  const onSubmit = async (data) => {
    const result = await login(data);
    if (!result.success) {
      // 登录失败，提示错误信息
      alert(result.message || result.error);
    } else {
      // 登录成功，执行后续逻辑（比如存用户信息、跳转页面）
      console.log("登录成功", result.data);
      // router.push('/dashboard')
    }
  };

  return(
    <form onSubmit={handleSubmit(onSubmit)}>
      {/* 你的表单输入字段 */}
      <button type="submit">submit</button>
    </form>
  )
}

export default LoginForm;

可选优化：用抛出错误处理异常 #

如果你想更贴合React Server Actions的错误处理规范，可以直接在Server Action里抛出错误，客户端用try/catch捕获：

// actions.js中修改错误判断逻辑
if (user.length == 0) {
  throw new Error("Invalid credentials.");
}

// 客户端捕获错误
const onSubmit = async (data) => {
  try {
    const result = await login(data);
    // 登录成功逻辑
  } catch (err) {
    alert(err.message);
  }
};

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