NextJs客户端向服务端传值时出现类型不支持运行时错误

错误核心原因 #

这个报错的本质是：服务端返回给客户端的数据包含了非普通对象（比如Supabase的响应实例、Error类实例），Next.js要求服务端传递给客户端的数据必须是普通对象、字符串、数字等可序列化的内置类型，不支持类实例或无原型的对象。

另外你在客户端做了多余操作：把form.getValues()返回的普通对象转成Map再序列化，Map无法被JSON正确序列化为有效数据，会导致服务端解析后数据异常。

修正步骤 #

1. 客户端代码修正 #

去掉不必要的Map转换，直接使用form.getValues()返回的普通对象：

const form = useForm({
  defaultValues: {
    email: "",
    password: "",
    student_fname: "",
    student_lname: "",
    student_birth: "",
    student_bplace: "",
    student_phone: "",
    student_gender: "",
  },
});

async function onSubmit() {
  // temp
  const supabase = await createServerObject();
  await supabase.auth.signInWithPassword({
    email: 'admin@email.com',
    password: '12345678',
  });
  // 直接用form返回的普通对象，无需转Map
  const formData = form.getValues();
  const user_id = "1"; // 后续替换为真实逻辑
  // 直接传递普通对象，无需提前stringify
  const errMsg = await createStudent(formData, user_id.toString());
  if (errMsg !== "") {
    alert("ERROR : " + errMsg);
    return;
  }
  alert("Student Inserted");
}

2. 服务端代码修正 #

• 添加"use server"标识（Next.js Server Action 必填）
• 不返回类实例，提取错误信息返回字符串
• 去掉冗余的JSON.parse(JSON.stringify(...))操作：

// 标记为Server Action
"use server";

export async function createStudent(formData: any, user_id: string = ""): Promise<string> {
  try {
    console.log(formData);
    const supabase = await createServerObject();
    // 检查管理员身份
    const { data: adminData, error: adminError } = await supabase
      .from("admin")
      .select("*")
      .eq("user_id", user_id);

    if (adminError) {
      console.log(adminError);
      return adminError.message || "管理员身份验证失败";
    }

    if (adminData && adminData.length > 0) {
      const adminSupaClient = await createSupbaseAdmin();
      // 修复：这里必须加await，否则无法获取正确的用户数据
      const userResponse = await adminSupaClient.auth.getUser();
      const createResult = await adminSupaClient.auth.admin.createUser({
        email: formData.email,
        password: formData.password,
        user_metadata: {
          role: 'student',
        }
      });

      if (createResult.error) {
        console.log(createResult.error);
        return createResult.error.message || "创建用户失败";
      }

      const response = await adminSupaClient.from("student").insert({
        user_id: userResponse.data.user?.id,
        student_fname: formData.student_fname,
        student_lname: formData.student_lname,
        student_birth: formData.student_birth,
        student_bplace: formData.student_bplace,
        student_gender: formData.student_gender
      });

      if (response.error) {
        console.log(response.error);
        return response.error.message || "插入学生数据失败";
      }

      return "";
    } else {
      return "用户不是管理员";
    }

  } catch (error) {
    console.log(error);
    // 提取错误信息，不直接返回Error对象
    if (error instanceof Error) {
      return error.message;
    }
    return "未知错误";
  }
}

关键修正点 #

• 客户端直接传递普通对象，避免Map转换导致的序列化失效
• 服务端函数添加"use server"标识，符合Next.js Server Action规则
• 所有错误返回都提取message字符串，禁止返回类实例（比如Supabase的Error对象）
• 修复了服务端漏加await的问题，避免获取用户ID时出现异常

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