Astro客户端环境变量使用问题：React组件无法访问VITE变量

一、环境变量加载异常的原因 #

• Vite的核心规则：只有以VITE_为前缀的环境变量才会被注入到客户端代码中，非VITE_开头的变量默认属于服务端专用，不会被打包到前端代码里，所以你那个非VITE_的变量看不到是正常现象。
• 两个VITE_变量只加载一个，大概率是这几个问题：
  • .env文件里变量名拼写错误，比如大小写、下划线打错，仔细核对变量名和代码中调用的是否完全一致
  • 修改.env文件后没重启Vite开发服务器，Vite不会自动热更新.env里的内容，必须重启才能生效
  • 你可能用了多环境.env文件（比如.env.development、.env.production），目标变量被其他环境的配置覆盖了

二、useEffect里"拿不到"变量的问题 #

你代码里的问题根本不是拿不到import.meta.env.VITE_SITE_RECAPTCHA_KEY，而是React状态更新是异步的：

useEffect(()=>{
  SetRecaptchaKey(import.meta.env.VITE_SITE_RECAPTCHA_KEY);
  console.log(recaptchaKey); // 这里打印的是更新前的旧值，不是刚设置的新值
});

要验证环境变量是否能正常获取，直接打印环境变量本身即可：

useEffect(()=>{
  console.log(import.meta.env.VITE_SITE_RECAPTCHA_KEY); // 直接查看这个值是否存在
  SetRecaptchaKey(import.meta.env.VITE_SITE_RECAPTCHA_KEY);
}, []); // 别忘了加空依赖数组，避免组件每次渲染都重复执行

如果要看到更新后的状态值，要么用useEffect监听状态变化，要么使用状态更新的回调：

// 方式1：监听状态变化
useEffect(()=>{
  console.log(recaptchaKey); // 当recaptchaKey更新后自动打印
}, [recaptchaKey]);

// 方式2：状态更新回调（仅适用于useState的setter）
useEffect(()=>{
  SetRecaptchaKey(import.meta.env.VITE_SITE_RECAPTCHA_KEY, () => {
    console.log(recaptchaKey); // 状态更新完成后执行
  });
}, []);

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