React TypeScript调用EmailJS sendForm时出现form.current类型报错

问题场景 #

在React TypeScript项目中使用EmailJS官方提供的React示例模板代码时，已完成useRef()、sendEmail常量相关的基础报错适配，但在sendEmail函数内传入form.current调用emailjs.sendForm的代码行触发类型错误。

报错信息 #

(property) React.RefObject.current: HTMLFormElement | null
Argument of type 'HTMLFormElement | null' is not assignable to parameter of type 'string | HTMLFormElement'.
Type 'null' is not assignable to type 'string | HTMLFormElement'.ts(2345)

原问题代码 #

import React, { useRef } from 'react';
import emailjs from '@emailjs/browser';

export const ContactUs = () => {
  const form = useRef<HTMLFormElement>(null);

  const sendEmail = (e) => {
    e.preventDefault();

    emailjs.sendForm('YOUR_SERVICE_ID', 'YOUR_TEMPLATE_ID', form.current, 'YOUR_PUBLIC_KEY')
      .then((result) => {
          console.log(result.text);
      }, (error) => {
          console.log(error.text);
      });
  };

  return (
    <form ref={form} onSubmit={sendEmail}>
      <label>Name</label>
      <input type="text" name="user_name" />
      <label>Email</label>
      <input type="email" name="user_email" />
      <label>Message</label>
      <textarea name="message" />
      <input type="submit" value="Send" />
    </form>
  );
};

报错原因 #

• useRef<HTMLFormElement>(null)初始化时传入null作为默认值，TypeScript会推断form.current的类型为HTMLFormElement | null
• emailjs.sendForm的第三个参数要求传入类型为string | HTMLFormElement，不接受null值，类型不匹配触发TS校验错误
• 原代码中sendEmail的事件参数e未标注类型，TS严格模式下也会触发隐式any报错

修复方案 #

方案1：非空断言（简洁写法，适合确定ref绑定必然生效的场景） #

在form.current后添加非空断言操作符!，告诉TypeScript该位置的值不可能为null，同时给事件参数e补充React.FormEvent类型标注即可：

import React, { useRef } from 'react';
import emailjs from '@emailjs/browser';

export const ContactUs = () => {
  const form = useRef<HTMLFormElement>(null);

  // 补充事件类型
  const sendEmail = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();

    // 给form.current加非空断言
    emailjs.sendForm('YOUR_SERVICE_ID', 'YOUR_TEMPLATE_ID', form.current!, 'YOUR_PUBLIC_KEY')
      .then((result) => {
          console.log(result.text);
      }, (error) => {
          console.log(error.text);
      });
  };

  return (
    <form ref={form} onSubmit={sendEmail}>
      <label>Name</label>
      <input type="text" name="user_name" />
      <label>Email</label>
      <input type="email" name="user_email" />
      <label>Message</label>
      <textarea name="message" />
      <input type="submit" value="Send" />
    </form>
  );
};

方案2：空值判断（类型安全最高，兼容极端边界场景） #

在调用emailjs.sendForm前增加空值判断，当form.current不存在时直接终止逻辑，TypeScript会自动收窄类型，排除null的可能性：

import React, { useRef } from 'react';
import emailjs from '@emailjs/browser';

export const ContactUs = () => {
  const form = useRef<HTMLFormElement>(null);

  const sendEmail = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    // 空值判断提前返回
    if (!form.current) return;

    emailjs.sendForm('YOUR_SERVICE_ID', 'YOUR_TEMPLATE_ID', form.current, 'YOUR_PUBLIC_KEY')
      .then((result) => {
          console.log(result.text);
      }, (error) => {
          console.log(error.text);
      });
  };

  return (
    <form ref={form} onSubmit={sendEmail}>
      <label>Name</label>
      <input type="text" name="user_name" />
      <label>Email</label>
      <input type="email" name="user_email" />
      <label>Message</label>
      <textarea name="message" />
      <input type="submit" value="Send" />
    </form>
  );
};

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