Firebase登录异常：页面刷新导致表单功能失效

1. 页面刷新的核心原因 #

你代码里的e.preventDefault只是引用了方法，没有执行调用，正确写法必须是e.preventDefault()。缺少括号导致默认的表单提交行为（页面刷新）完全没被阻止，这就是登录时页面意外刷新的根本原因。

2. 表单无响应的补充问题 #

你的Firebase登录方法调用存在参数错误：

• 若使用Firebase v8及更早的命名空间模式，signInWithEmailAndPassword不需要额外传入auth实例作为第一个参数，正确调用是：

  firebase.auth().signInWithEmailAndPassword(email, password)
  

• 若使用Firebase v9+的模块化模式，需先正确导入方法并创建auth实例：

  import { getAuth, signInWithEmailAndPassword } from "firebase/auth";
  const auth = getAuth();
  // 再调用登录方法
  signInWithEmailAndPassword(auth, email, password)
  

当前写法混合了两种模式，会导致登录方法执行失败，即使阻止了页面刷新，表单也会看起来“无响应”。

修正后的完整代码 #

HTML部分（无需改动）

<form class="login">
    <label for="email">email:</label>
    <input type="email" id="email" name="email" />
    <label class="password">password:</label>
    <input type="password" id="password" name="password" />
    <button type="submit">login</button>
</form>

JavaScript（适配Firebase v8及以下）

const loginForm = document.querySelector(".login");
loginForm.addEventListener("submit", (e) => {
    // 关键：调用preventDefault方法
    e.preventDefault();

    const email = loginForm.email.value;
    const password = loginForm.password.value;

    firebase
        .auth()
        // 移除多余的auth参数
        .signInWithEmailAndPassword(email, password)
        .then((cred) => {
            console.log("user logged in", cred.user);
        })
        .catch((err) => {
            console.log(err.message);
        });
});

JavaScript（适配Firebase v9+模块化模式）

import { getAuth, signInWithEmailAndPassword } from "firebase/auth";
// 需确保已完成Firebase应用初始化
const auth = getAuth();

const loginForm = document.querySelector(".login");
loginForm.addEventListener("submit", (e) => {
    e.preventDefault();

    const email = loginForm.email.value;
    const password = loginForm.password.value;

    signInWithEmailAndPassword(auth, email, password)
        .then((cred) => {
            console.log("user logged in", cred.user);
        })
        .catch((err) => {
            console.log(err.message);
        });
});

额外排查建议 #

• 打开浏览器控制台（F12）查看是否有Firebase初始化或调用相关报错，快速定位参数或导入问题。
• 确认Firebase SDK版本与代码写法匹配，避免混合不同版本的API调用逻辑。

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