Next.js 14客户端组件无法接收Server Action响应求助

1. 修正 Server Action 的错误捕获与返回逻辑 #

next-auth 5 的 signIn 方法在认证失败时会直接抛出错误，而非返回错误信息。如果你的 Server Action 未捕获该错误并返回结构化数据，客户端将无法获取有效响应。

修改 Server Action，用 try/catch 包裹 signIn，明确返回成功或错误状态：

// app/actions/auth.actions.ts
'use server';

import { signIn } from '@/auth';

export async function loginAction(formData: FormData) {
  try {
    await signIn('credentials', {
      email: formData.get('email') as string,
      password: formData.get('password') as string,
      redirect: false, // 关键：禁止自动跳转，手动处理结果
    });
    return { success: true, error: null };
  } catch (error: any) {
    // 提取 next-auth 5 嵌套的错误信息
    const errorMessage = error?.cause?.err?.message || '登录失败，请重试';
    return { success: false, error: errorMessage };
  }
}

2. 正确使用 useFormState 接收响应 #

确保初始化状态并绑定包装后的 action：

// app/login/page.tsx (客户端组件)
'use client';

import { useFormState } from 'react-dom';
import { loginAction } from '@/app/actions/auth.actions';

// 初始状态
const initialState = { success: false, error: null };

export default function LoginPage() {
  const [state, formAction] = useFormState(loginAction, initialState);

  return (
    <form action={formAction}>
      <input type="email" name="email" required />
      <input type="password" name="password" required />
      <button type="submit">登录</button>
      {/* 展示错误信息 */}
      {state.error && <p style={{ color: 'red' }}>{state.error}</p>}
      {/* 展示成功提示 */}
      {state.success && <p style={{ color: 'green' }}>登录成功</p>}
    </form>
  );
}

3. 手动调用 Server Action 的场景处理 #

如果通过按钮点击等方式手动触发，需用 await 获取返回值：

'use client';

import { loginAction } from '@/app/actions/auth.actions';

export default function LoginPage() {
  const handleLogin = async (e: React.FormEvent) => {
    e.preventDefault();
    const formData = new FormData(e.currentTarget as HTMLFormElement);
    const result = await loginAction(formData);
    
    if (result.error) {
      console.log('登录失败:', result.error);
    } else {
      console.log('登录成功');
    }
  };

  return (
    <form onSubmit={handleLogin}>
      <input type="email" name="email" required />
      <input type="password" name="password" required />
      <button type="submit">登录</button>
    </form>
  );
}

4. 排查常见问题 #

• 确认 Server Action 文件顶部有 'use server' 指令，且文件位于 app/ 目录下（符合 App Router 规范）。
• 检查 next-auth 中间件是否拦截了请求，导致响应无法正常返回。
• 确保客户端组件已添加 'use client' 指令，避免被渲染为服务器组件。

内容的提问来源于stack exchange，提问作者O. Shehab