Firebase创建用户重复触发求助：邮箱注册2次，谷歌注册3次

常见原因及解决方案 #

1. React严格模式（Strict Mode）导致的重复执行 #

React开发环境下的Strict Mode会刻意重复调用组件函数、hooks初始化和副作用函数，用于检测潜在问题，但这会导致firebase的注册/登录操作被触发多次。

解决方法：
临时移除项目入口文件（通常是index.js）中的<React.StrictMode>包裹，验证问题是否消失：

// 原代码
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

// 修改后
ReactDOM.render(
  <App />,
  document.getElementById('root')
);

注意：Strict Mode仅在开发环境生效，生产环境不会有这个问题。若需保留Strict Mode，可通过加载状态控制避免重复操作。

2. 添加加载状态拦截重复触发 #

利用react-firebase-hooks返回的loading状态，在操作执行前判断是否处于加载中，阻止重复触发。

修改邮箱注册的提交函数：

const onSubmit = async data => {
  // 加载中时直接返回，避免重复提交
  if (loading) return;
  
  try {
    await createUserWithEmailAndPassword(data.email, data.password);
    alert('You successfully created your account');
  } catch (error) {
    // 处理注册失败提示
    alert(`注册失败: ${error.message}`);
  }
};

修改Google登录按钮的点击事件：

<button 
  onClick={() => {
    // Google登录加载中时不执行操作
    if (googleLoading) return;
    signInWihGoogle();
  }}
  class="btn btn-outline"
>
  Continue with Google
</button>

3. 检查组件是否被重复挂载 #

确认SignUp组件没有被多次渲染，排查方向包括：

• 路由配置中是否重复定义了该组件的路由
• 父组件是否因状态变化导致SignUp反复卸载、重新挂载
• 是否在多个位置引入并渲染了SignUp组件

可在组件内添加日志验证：

function SignUp() {
  console.log('SignUp组件渲染');
  // 其余代码...
}

若控制台多次输出该日志，说明组件被重复挂载，需调整父组件或路由逻辑。

内容的提问来源于stack exchange，提问作者R. Mahbub