Next.js联系表单提交成功但Toast通知无法触发的问题排查

核心问题排查与解决方案 #

1. 缺少Toaster根渲染组件（最常见原因） #

shadcn/ui的useToast钩子依赖根层级的<Toaster />组件来渲染通知弹窗。如果未在应用全局挂载该组件，调用toast()只会更新状态，但没有对应的UI容器展示内容。

修复方式：
在根布局文件（如app/layout.tsx）中添加Toaster组件：

// app/layout.tsx
import { Toaster } from "@/components/ui/toaster";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="zh-CN">
      <body>
        {children}
        <Toaster /> {/* 必须添加此组件 */}
      </body>
    </html>
  );
}

2. 成功分支的路由跳转中断Toast渲染 #

当前代码在调用toast()后立即执行router.push("/")，页面会瞬间导航到首页，Toast还未完成渲染就被组件卸载。

修复方式：
添加延迟跳转，让用户有足够时间看到通知：

if (result.success) {
  toast({
    title: "消息发送成功",
    description: "你的消息已成功送达。",
  });
  // 延迟1.5秒后跳转
  setTimeout(() => {
    router.push("/");
  }, 1500);
}

3. SendEmail函数未正确抛出错误 #

如果SendEmail在失败时仅返回{ success: false }而非抛出异常，catch块不会触发，错误Toast自然无法显示。

修复方式：
修改SendEmail实现，确保失败时抛出错误：

// @/components/send-email.ts
export async function SendEmail(formData: FormData) {
  const res = await fetch("/api/email", {
    method: "POST",
    body: formData,
  });

  const data = await res.json();
  if (!res.ok || !data.success) {
    throw new Error(data.message || "邮件发送失败");
  }
  return data;
}

4. 验证useToast钩子的正确性 #

确认use-toast.ts的实现符合shadcn/ui的规范（依赖React Context管理状态），且导入路径无误。

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