独立登录页中Firebase signInWithEmailAndPassword函数无法执行问题

我正在制作一个用户登录页面，不想像教程那样把登录与注册功能放在同一页面，打算用独立页面实现登录。当前JavaScript代码能触发点击事件，但signInWithEmailAndPassword函数始终无法正常执行。

我的HTML代码 #

<div id="navbar">
        <div class="subhead1">
            <a href="../index.html"><img src="../Images/logo.png" class="logo"></a>
        </div>
        <div class="subhead2">
            <div>
                <a href="signup.html" class="signup">Sign Up</a>
            </div>
            <div>
                <a href="account_type.html" class="login">Login</a>
            </div>
        </div>
    </div>
    <div class="main">
        <div class="container">
            <div class="header">
                <h2>Customer Login</h2>
            </div>
            <form>
                <div class="input">
                    <div class="input-row">
                        <input type="text" name="email" placeholder="Email" required />
                    </div>
                    <div class="input-row">
                        <input type="password" name="password" placeholder="Password" required />
                    </div>
                    <div class="input-row">
                        <div class="remember-me">
                            <input type="checkbox" id="remember" name="remember" value="Remember Me" />
                            <label for="remember"> Remember Me</label>
                        </div>
                        <button id="submitData" name="submitData">Login</button>
                    </div>
                    <div class="input-row">
                        <a href="#">Forgot Password</a>
                    </div>
                </div>
            </form>
        </div>
    </div>

我的JavaScript代码 #

<script type="module">
        // Import the functions you need from the SDKs you need
        import { initializeApp } from "https://www.gstatic.com/firebasejs/9.10.0/firebase-app.js";
        import { getAnalytics } from "https://www.gstatic.com/firebasejs/9.10.0/firebase-analytics.js";
        import {
            getAuth,
            signInWithEmailAndPassword
        } from "https://www.gstatic.com/firebasejs/9.10.0/firebase-auth.js";


        // TODO: Add SDKs for Firebase products that you want to use
        // https://firebase.google.com/docs/web/setup#available-libraries

        // Your web app's Firebase configuration
        const firebaseConfig = {
            apiKey: "redacted",
            authDomain: "redacted",
            projectId: "redacted",
            storageBucket: "redacted",
            messagingSenderId: "redacted",
            appId: "redacted",
            measurementId: "redacted",
            databaseURL: "redacted"
        };

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

        // Firebase functions

        submitData.addEventListener('click', (e) => {
            alert("test");
            var email = document.getElementById("email").value;
            var password = document.getElementById("password").value;
            signInWithEmailAndPassword(auth, email, password)
                .then((userCredential) => {
                    // Signed in 
                    const user = userCredential.user;
                    alert("Success");
                    // ...
                })
                .catch((error) => {
                    const errorCode = error.code;
                    const errorMessage = error.message;
                    alert("Error");
                });
        });
    </script>

问题排查与修复 #

核心问题1：表单默认提交行为未阻止 #

按钮嵌套在<form>标签内，点击后浏览器会默认提交表单并刷新页面，导致signInWithEmailAndPassword函数还没执行完就被中断。

核心问题2：输入框无ID，无法获取值 #

你的邮箱和密码输入框只有name属性，没有id，document.getElementById("email")会返回null，最终传给Firebase的参数是undefined，函数执行直接失败，但页面刷新让你看不到错误提示。

修复后的代码 #

修改后的HTML（关键部分）

<form>
    <div class="input">
        <div class="input-row">
            <!-- 添加id属性用于获取值 -->
            <input type="text" id="email" name="email" placeholder="Email" required />
        </div>
        <div class="input-row">
            <!-- 添加id属性用于获取值 -->
            <input type="password" id="password" name="password" placeholder="Password" required />
        </div>
        <div class="input-row">
            <div class="remember-me">
                <input type="checkbox" id="remember" name="remember" value="Remember Me" />
                <label for="remember"> Remember Me</label>
            </div>
            <button id="submitData" name="submitData">Login</button>
        </div>
        <div class="input-row">
            <a href="#">Forgot Password</a>
        </div>
    </div>
</form>

修改后的JavaScript（关键部分）

submitData.addEventListener('click', (e) => {
    // 阻止表单默认提交，避免页面刷新
    e.preventDefault();
    alert("test");
    var email = document.getElementById("email").value;
    var password = document.getElementById("password").value;
    // 打印日志确认获取到的输入值
    console.log("邮箱：", email, "密码：", password);
    signInWithEmailAndPassword(auth, email, password)
        .then((userCredential) => {
            const user = userCredential.user;
            alert("登录成功");
            // 这里可以添加登录成功后的跳转逻辑，比如跳转到首页
            // window.location.href = "../index.html";
        })
        .catch((error) => {
            const errorCode = error.code;
            const errorMessage = error.message;
            // 显示具体错误信息，方便排查问题
            alert(`登录失败：${errorMessage}`);
            console.error("错误码：", errorCode, "错误信息：", errorMessage);
        });
});

额外调试建议 #

• 用console.log替代alert做调试，alert会阻塞代码执行，且无法查看详细数据
• 登录成功后添加页面跳转逻辑，提升用户体验
• 可以在前端先做邮箱格式、密码长度等基础验证，减少无效的Firebase请求

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