Firebase Realtime Database不工作 无法写入注册用户数据问题求助

一、HTML文件存在的问题 #

• 用ES Module语法导入Firebase依赖时，script标签未添加type="module"属性，导致导入失败
• firebaseConfig配置对象未完成定义，缺少配置字段和闭合大括号，初始化逻辑直接报错
• 未导入Realtime Database相关依赖，无法操作数据库

二、index.js文件存在的问题 #

• 未导入getDatabase、ref、set等数据库操作方法，也未初始化database实例，代码中用到的database变量未定义
• 代码执行顺序完全错误：用户注册逻辑auth.createUserWithEmailAndPassword直接在页面加载时执行，未绑定到register函数内，此时email、password均为未定义变量；输入校验逻辑放在了注册请求之后，完全没有生效
• document.getElementById参数未加引号，应该传入字符串形式的元素ID，否则会读取未定义的变量作为ID，无法获取输入框内容
• 邮箱校验函数逻辑错误：第一行提前执行了test(str)，但str变量未定义，且重复调用了test方法
• 密码校验逻辑错误：直接判断password<6，应该判断password.length<6，否则字符串和数字对比永远返回false
• 错误捕获块未使用返回的err参数，自定义的error_code、error_message都是未定义变量，无法正确获取错误信息
• email、password变量未声明，直接赋值会触发变量未定义报错

三、修正后代码 #

HTML文件代码 #

<script type="module">
  import { initializeApp } from "firebase/app";
  import { getAnalytics } from "firebase/analytics";
  import { getAuth } from "firebase/auth";
  import { getDatabase } from "firebase/database";
  // 替换为自己的Firebase配置项
  const firebaseConfig = {
    apiKey: "你的apiKey",
    authDomain: "你的authDomain",
    databaseURL: "你的databaseURL",
    projectId: "你的projectId",
    storageBucket: "你的storageBucket",
    messagingSenderId: "你的messagingSenderId",
    appId: "你的appId",
    measurementId: "你的measurementId"
  };
  const app = initializeApp(firebaseConfig);
  const analytics = getAnalytics(app);
  const auth = getAuth(app);
  const database = getDatabase(app);
  // 挂载实例到window，方便外部js调用
  window.firebase = { auth, database };
</script>
<script type="module" src="js/index.js"></script>
<!-- 注册按钮示例 -->
<button id="registerBtn">注册</button>

index.js文件代码 #

import { createUserWithEmailAndPassword } from "firebase/auth";
import { ref, set } from "firebase/database";
const auth = window.firebase.auth;
const database = window.firebase.database;

// 输入校验函数
function validate_email(email){
  const expression = /^[^@]+@\w+(\.\w+)+\w$/;
  return expression.test(email);
}
function validate_pass(password){
  // Firebase要求密码长度至少6位
  return password.length >=6;
}

// 注册函数
function register(){
  // 获取输入框内容
  const email = document.getElementById('email').value;
  const password = document.getElementById('password').value;

  // 先校验输入
  if(!validate_email(email) || !validate_pass(password)){
    alert("邮箱或密码格式不正确");
    return;
  }

  // 执行注册逻辑
  createUserWithEmailAndPassword(auth, email, password)
  .then((result) => {
    const user = result.user;
    // 写入用户数据到数据库
    const userRef = ref(database, 'users/' + user.uid);
    return set(userRef, {
      email: email,
      last_login: Date.now()
    });
  }).then(() => {
    alert("用户创建成功");
  }).catch((err) => {
    alert(err.message);
  });
}
// 绑定注册按钮点击事件
document.getElementById('registerBtn').addEventListener('click', register);

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