Next.js中react-google-recaptcha约1分钟后出现length读取报错问题

问题根源 #

react-google-recaptcha自带1分钟的验证超时机制，超时后验证码会自动重置，此时onChange回调会传入null。你的代码里直接访问reCapValue.length，当reCapValue变成null时，自然会触发Cannot read properties of null (reading 'length')错误。

两种修复方式 #

方式一：在onChange中统一处理null值 #

修改onChange函数，把传入的null转为空字符串，保证reCapValue始终是字符串类型：

const [reCapValue, setreCapValue] = useState(""); 
function onChange(value: any) {
  console.log("Captcha value:", value);
  // 用空字符串替代null
  setreCapValue(value || "");
}

方式二：优化按钮的判断逻辑 #

不用直接访问length，而是利用null和空字符串都是假值的特性，直接判断变量本身：

<button
  type="submit"
  className={`${
    reCapValue ? "bg-Color text-white" : "bg-gray-300"
  } rounded-md disabled:cursor-not-allowed`}
  disabled={!reCapValue}
>
  Ok
</button>

两种方式都能避免超时后的报错，同时不影响初始的验证功能。

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