Firebase用户认证功能异常求助：分表单事件无响应

问题概述 #

基于Firebase开发用户认证功能时，将注册、登录、登出逻辑拆分到类名为signin的注册表单、类名为signout的登录表单，以及类名为logout的登出按钮后，程序完全无响应；但在同一表单事件下单独运行某一项功能（注释其他代码）时能正常工作。

核心问题分析 #

1. 变量命名冲突：登录表单的变量名signOut与Firebase的登出函数signOut重名，导致调用登出功能时实际调用的是DOM元素而非Firebase函数，直接引发错误。
2. 表单事件监听方式错误：给表单元素绑定click事件而非submit事件，无法正确响应表单提交动作；同时直接通过表单元素访问输入框的方式不可靠，容易导致获取不到输入值。
3. 不必要的默认行为阻止：登出按钮不属于表单提交按钮，调用e.preventDefault()无意义，甚至可能干扰正常逻辑。

修复后的完整代码 #

// Import the functions you need from the SDKs you need
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.22.1/firebase-app.js";
import {
  getAuth,
  createUserWithEmailAndPassword,
  signInWithEmailAndPassword,
  signOut,
} from "https://www.gstatic.com/firebasejs/9.22.1/firebase-auth.js";
import {
  getDatabase,
  set,
  ref,
  update,
} from "https://www.gstatic.com/firebasejs/9.22.1/firebase-database.js";

// Your web app's Firebase configuration 
const firebaseConfig = {
  apiKey: "AIzaSyBxTyIjvXXCDWNJTI8-sFjJfVP2UJOXdIA",
  authDomain: "mbconline-c8ae4.firebaseapp.com",
  databaseURL: "https://mbconline-c8ae4-default-rtdb.firebaseio.com",
  projectId: "mbconline-c8ae4",
  storageBucket: "mbconline-c8ae4.appspot.com",
  messagingSenderId: "408267091210",
  appId: "1:408267091210:web:c8a1f1eacfd7087b775ef3",
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const auth = getAuth();
const database = getDatabase(app);

// 修正变量命名，避免与Firebase函数冲突
const signUpForm = document.querySelector(".signin");
const signInForm = document.querySelector(".signout");
const logOutBtn = document.querySelector(".logout");

// 注册功能：监听表单submit事件
signUpForm.addEventListener("submit", (e) => {
  e.preventDefault();
  // 正确获取表单内的输入字段
  const email = signUpForm.querySelector('input[name="email"]').value;
  const password = signUpForm.querySelector('input[name="password"]').value;

  createUserWithEmailAndPassword(auth, email, password)
    .then((userCredential) => {
      const user = userCredential.user;
      set(ref(database, "users/" + user.uid), {
        email: email,
        password: password,
      })
        .then(() => {
          alert("用户创建成功");
        })
        .catch((error) => {
          alert(error);
        });
    })
    .catch((error) => {
      const errorMessage = error.message;
      alert(errorMessage);
    });
});

// 登录功能：监听表单submit事件
signInForm.addEventListener("submit", (e) => {
  e.preventDefault();
  const email = signInForm.querySelector('input[name="email"]').value;
  const password = signInForm.querySelector('input[name="password"]').value;

  signInWithEmailAndPassword(auth, email, password)
    .then((userCredential) => {
      const user = userCredential.user;
      let lgDate = new Date();
      update(ref(database, "users/" + user.uid), {
        last_login: lgDate,
      })
        .then(() => {
          alert("用户登录成功");
        })
        .catch((error) => {
          alert(error);
        });
    })
    .catch((error) => {
      const errorMessage = error.message;
      alert(errorMessage);
    });
});

// 登出功能：监听按钮click事件，移除不必要的preventDefault
logOutBtn.addEventListener("click", () => {
  signOut(auth)
    .then(() => {
      alert("登出成功");
    })
    .catch((error) => {
      alert("登出失败：" + error);
    });
});

修复说明 #

• 变量命名修正：将原signOut（登录表单）改为signInForm，logOut改为logOutBtn，彻底避免与Firebase的signOut函数重名。
• 表单事件优化：改用submit事件监听表单提交，兼容点击按钮和回车提交两种场景，同时通过querySelector精准获取表单内的输入字段，确保输入值能正确读取。
• 移除冗余代码：登出按钮移除e.preventDefault()，避免无意义的默认行为阻止，简化逻辑。

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