Next.js+TypeScript中.env变量为string|undefined传参报错如何解决

出现这个类型错误的核心原因是：TypeScript静态检查阶段无法确认你是否真的在.env文件中配置了对应变量，因此Next.js默认给所有process.env下的属性标注的类型都是string | undefined，和EmailJS send方法要求的string类型参数不匹配，不需要把文件改成js后缀，以下三种方案都可以解决问题：

方案1：非空断言（最简便，适合确认变量已全环境配置的场景） #

直接在读取环境变量时使用TypeScript的非空断言运算符!，或者用as string做类型断言，告诉TS该值一定存在，跳过undefined检查：

// 直接在调用时断言
emailjs.send(
  process.env.NEXT_PUBLIC_EMAILJS_SERVICE_ID!,
  process.env.NEXT_PUBLIC_EMAILJS_TEMPLATE_ID!,
  process.env.NEXT_PUBLIC_EMAILJS_PUBLIC_KEY!,
  formData
)

也可以提前把配置统一抽成常量复用，避免每次调用都写断言：

const EMAILJS_CONFIG = {
  SERVICE_ID: process.env.NEXT_PUBLIC_EMAILJS_SERVICE_ID!,
  TEMPLATE_ID: process.env.NEXT_PUBLIC_EMAILJS_TEMPLATE_ID!,
  PUBLIC_KEY: process.env.NEXT_PUBLIC_EMAILJS_PUBLIC_KEY!
}

方案2：运行时校验（最严谨，避免线上漏配变量导致故障） #

如果担心硬断言后，线上部署漏配环境变量引发报错，可以在调用发送方法前先做变量存在性校验，TS会通过类型收窄自动把校验通过的变量识别为string类型，不需要额外断言：

const serviceId = process.env.NEXT_PUBLIC_EMAILJS_SERVICE_ID
const templateId = process.env.NEXT_PUBLIC_EMAILJS_TEMPLATE_ID
const publicKey = process.env.NEXT_PUBLIC_EMAILJS_PUBLIC_KEY

// 任意一个变量缺失就抛出明确的配置错误
if (!serviceId || !templateId || !publicKey) {
  throw new Error("EmailJS相关环境变量未配置完整，请检查.env文件")
}

// 此处三个变量类型均被收窄为string，直接传参不会报类型错误
await emailjs.send(serviceId, templateId, publicKey, formData)

方案3：全局类型声明（一劳永逸，全项目生效） #

可以在项目中补充环境变量的类型定义，让TS全局识别这些变量为必填的字符串类型：

1. 在项目根目录或types目录下新建env.d.ts文件
2. 写入如下类型声明：

declare namespace NodeJS {
  interface ProcessEnv {
    NEXT_PUBLIC_EMAILJS_SERVICE_ID: string;
    NEXT_PUBLIC_EMAILJS_TEMPLATE_ID: string;
    NEXT_PUBLIC_EMAILJS_PUBLIC_KEY: string;
    // 其他项目中确定必填的环境变量也可以在此处声明类型
  }
}

3. 重启TypeScript服务/Next.js开发服务器后，全项目读取上述几个环境变量时，TS会自动识别为string类型，无需额外断言或校验。

注意：非空断言和全局类型声明的前提是你已经在本地、生产等所有部署环境正确配置了对应环境变量，否则会出现运行时错误。如果项目是多人协作或者部署流程容易漏配变量，优先选择带运行时校验的方案2。

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