React应用集成Google ReCaptcha V3时遇‘Invalid reCAPTCHA client id’错误

以下是几个可能的原因及对应解决方法：

1. 密钥初始化时机错误 #

GoogleReCaptchaProvider可能在configSettings.reCaptchaKey还未正确加载完成时就完成了渲染，导致传入空值或无效密钥，生成错误的client id。

解决方法：
将GoogleReCaptchaProvider移到settings加载完成的分支内，确保密钥已准备好再初始化Provider：

{settings ? (
  <GoogleReCaptchaProvider reCaptchaKey={configSettings.reCaptchaKey} useEnterprise={true}>
    <BrowserRouter>
      <TopNavBar
        pages={[
          { label: 'Home', path: '/sub' },
          { label: 'Poos', path: '/poo' }
        ]}
      />
      <AppRoutes />
    </BrowserRouter>
  </GoogleReCaptchaProvider>
) : (
  <h4 style={{ textAlign: 'center' }}>Loading...</h4>
)}

2. 测试密钥域名未绑定 #

Google ReCaptcha测试密钥需要绑定你的开发域名（如localhost:3000），未正确配置会触发client id无效错误。

解决方法：
登录Google ReCaptcha控制台，找到你的测试密钥，检查「域名」设置，确保添加了当前开发环境的域名（包含端口号，比如本地开发的localhost:3000）。

3. useEnterprise参数与密钥类型不匹配 #

如果你的密钥是普通V3密钥而非企业版密钥，设置useEnterprise={true}会导致兼容性问题，引发错误。

解决方法：
确认密钥类型：

• 若为普通V3密钥，将useEnterprise改为false；
• 若为企业版密钥，确保密钥是从企业版ReCaptcha控制台生成的。

4. 提前调用executeRecaptcha #

可能在Provider完全初始化前就调用了executeRecaptcha，导致获取到的client id无效。

解决方法：
调整逻辑，确保executeRecaptcha存在且可用后再执行：

useEffect(() => {
  if (executeRecaptcha) {
    handleReCaptchaVerify();
  }
}, [executeRecaptcha]);

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