Typescript提示NextJS环境变量undefined，react-google-login生产部署失效

问题原因 #

1. TypeScript默认所有process.env下的环境变量类型为string | undefined，而react-google-login组件的clientId属性要求必填且为string类型，类型不匹配就会抛出你遇到的TS报错。
2. 本地运行正常但生产环境失效，是因为你本地.env文件配置了对应的变量，但生产部署时没有在部署平台配置NEXT_PUBLIC_GOOGLE_CLIENT_ID环境变量，实际运行时这个值为undefined，导致功能失效。

解决方案 #

第一步：修复TypeScript类型报错 #

你可以选择以下任意一种方案，优先推荐第三种更稳妥：

• 非空断言：确定环境变量一定存在的场景下，直接添加非空断言符!，告诉TS该值不可能为undefined

clientId={process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID!}

• 类型强制转换：用as指定该值为string类型

clientId={process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID as string}

• 运行时判断+兜底：提前校验环境变量是否存在，避免线上运行时缺失变量的问题

// 在组件代码前先校验环境变量
const googleClientId = process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID
if (!googleClientId) {
  throw new Error("请配置NEXT_PUBLIC_GOOGLE_CLIENT_ID环境变量")
}

// 组件内直接使用校验后的变量
<GoogleLogin
  clientId={googleClientId}
  // 其余属性保持不变
/>

第二步：修复生产环境失效问题 #

1. 去你部署项目的平台后台，找到环境变量配置项，添加NEXT_PUBLIC_GOOGLE_CLIENT_ID，值和你本地.env里的配置保持一致
2. 配置完成后，重新构建你的Next.js项目再发布（Next.js的NEXT_PUBLIC_开头的环境变量是构建阶段注入的，旧的构建包没有包含你新配置的环境变量）

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