Next.js 15+React19分离Server Action至独立文件触发bind错误求助

问题根源 #

1. 重复的"use server"指令：action.ts文件顶部已声明'use server'，函数内重复添加会破坏Server Action的正确标识逻辑。
2. 客户端组件内非法定义Server Action：若在客户端组件中编写带"use server"的异步函数作为表单action，会触发序列化错误（客户端组件无法执行Server Action代码）。
3. 缺失依赖导入：原action.ts未导入authClient，会引发后续运行错误（虽当前报错为bind，但属于潜在问题）。

修复步骤 #

1. 修正action.ts文件

• 仅保留文件顶部的'use server'指令，移除函数内的重复声明。
• 导入所有必要依赖，确保函数能正常执行。

'use server'

// 导入依赖，避免未定义错误
import { authClient } from "@/lib/auth-client";

export const abc = async (formData: FormData) => {
  // 从表单数据中获取用户输入（替代硬编码）
  const email = formData.get('email') as string;
  const password = formData.get('password') as string;

  const { data, error } = await authClient.signUp.email({
    email,
    password,
    name: "John Doe" // 可扩展为从formData获取，需添加对应输入框
  });

  console.log(data, error);
};

2. 客户端组件中正确使用Server Action

• 直接将导入的Server Action函数赋值给表单的action属性，不要在客户端组件内包装带"use server"的函数。
• 确保组件声明为客户端组件（添加'use client'指令）。

'use client'

// 根据实际文件路径调整导入
import { abc } from '@/app/actions/action';

export default function SignInPage() {
  return (
    <form action={abc}>
      <input type="email" name="email" placeholder="Email" required />
      <input type="password" name="password" placeholder="Password" required />
      <button type="submit">Sign In</button>
    </form>
  );
}

3. 额外排查点

• 重启Next.js开发服务器：缓存可能导致Server Action标识异常，重启后可解决。
• 校验导入路径：确保action.ts的导入路径正确，避免相对路径错误。

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