React.js中检查Firebase实时数据库内指定邮箱是否存在

问题分析 #

原代码存在几个关键问题导致无法正常运行：

• 表单提交未阻止默认跳转，会触发页面刷新中断查询逻辑
• 查询时错误传入字符串'email'给equalTo，而非用户实际输入的邮箱值
• 未遵循Firebase Realtime Database的查询API规范
• 缺少错误处理，无法排查查询失败的情况

修正后的代码 #

import { useState } from 'react';
import { getDatabase, ref, query, orderByChild, equalTo, onValue } from "firebase/database";
// 确保已正确初始化Firebase App并完成导入

export default function Login() {
  const [email, setEmail] = useState('');
  
  const handleSubmit = (e) => {   
    // 阻止表单默认提交行为，避免页面刷新
    e.preventDefault();
    
    const db = getDatabase();
    // 构造合法查询：在nature节点下匹配用户输入的邮箱
    const dbRef = ref(db, "nature");
    const emailQuery = query(dbRef, orderByChild('email'), equalTo(email));
    
    // 获取查询结果并处理
    onValue(emailQuery, (snapshot) => {
      if (snapshot.exists()) {
        alert("邮箱已存在");     
      } else { 
        alert("邮箱未注册");     
      }
    }, (error) => {
      // 处理查询异常
      console.error("查询失败：", error);
      alert("查询出错，请稍后重试");
    });
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>Email:</label>
        <input
          type="email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          required
        />
      </div>
      <button type="submit">检查邮箱</button>
    </form>
  );
}

额外注意事项 #

• 数据库权限配置：确保Firebase实时数据库规则允许读取操作，否则会被拒绝访问。开发环境临时规则示例（生产环境需配置严格的安全规则）：

{
  "rules": {
    ".read": true,
    ".write": true
  }
}

• 索引优化：如果数据量较大，需给email字段添加索引避免全表扫描，在数据库规则中配置：

{
  "rules": {
    "nature": {
      ".indexOn": ["email"]
    }
  }
}

• 用户体验优化：实际项目中建议用页面内嵌提示替代alert，提升交互体验。

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