React Hook Forms调用EmailJS REST API返回400错误如何解决？

核心错误原因 #

你当前代码的主要问题是对template_params字段做了多余的JSON序列化：

• EmailJS API要求template_params接收普通JavaScript对象，你使用JSON.stringify(data)会将表单数据转为字符串，导致接口参数解析异常，连带触发参数校验错误。
• 部分场景下未显式声明JSON请求头也可能导致参数解析失败。

修正后的代码 #

const onSubmit = async (data: IContactForm) => {
  try {
    const emailData = {
      service_id: serviceID,
      template_id: templateID,
      user_id: userID,
      // 直接传入原始表单对象，不需要序列化
      template_params: data
    };

    const res = await axios({
      method: 'POST',
      url: 'https://api.emailjs.com/api/v1.0/email/send',
      headers: {
        'Content-Type': 'application/json'
      },
      data: emailData
    });
    // 此处补充发送成功的处理逻辑
  } catch (err) {
    // 打印完整错误响应体，可查看接口返回的具体错误说明
    console.log('发送失败', err.response?.data);
  }
};

可选优化方案 #

直接使用EmailJS官方提供的前端SDK，可避免手动拼接请求的参数格式问题：

1. 安装依赖：npm install @emailjs/browser
2. 调用代码：

import emailjs from '@emailjs/browser';

const onSubmit = async (data: IContactForm) => {
  try {
    await emailjs.send(serviceID, templateID, data, userID);
    // 发送成功逻辑
  } catch (err) {
    console.error(err);
  }
};

额外排查项 #

如果修改后仍返回400错误，可按以下顺序核对：

• 确认userID是EmailJS后台「Account」页面下的公钥，不是私钥、服务ID或模板ID
• 确认表单数据的字段名和你在EmailJS后台配置的模板变量名完全一致，大小写敏感

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