使用Firebase搭建注册登录页面遇错误，求问题排查

问题原因 #

从错误截图可知，核心问题是在非模块类型的脚本中使用了ES6的import语句，同时你混用了Firebase v9的模块化API和旧版命名空间API，再加上配置代码里的语法错误，导致页面加载失败。

代码中的错误点 #

• import语句使用错误：普通<script>标签不支持ES模块的import语法，你直接写import { initializeApp } from "firebase/app";会触发语法错误。
• Firebase API版本混用：你引入的是Firebase v9标准CDN脚本，但代码用的是v8及以前的旧版命名空间写法（比如firebase.initializeApp、firebase.auth()），v9默认采用模块化API，两种写法无法直接混用。
• 配置对象注释错误：firebaseConfig里用了#copied from the firebase website，JavaScript单行注释需用//，#是无效符号，会导致配置对象语法错误。

修正后的完整代码 #

改用Firebase v9的兼容（compat）版本CDN，它支持旧版命名空间写法，适合新手快速上手：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Firebase Authentication</title>
    <!-- 替换为Firebase v9兼容版本CDN -->
    <script src="https://www.gstatic.com/firebasejs/9.5.0/firebase-app-compat.js"></script>
    <script src="https://www.gstatic.com/firebasejs/9.5.0/firebase-auth-compat.js"></script>
    <script src="https://www.gstatic.com/firebasejs/9.5.0/firebase-database-compat.js"></script>
</head>
<body>
    <div id="login-container">
        <h2>Login</h2>
        <form id="login-form">
            <label for="email">Email:</label>
            <input type="email" id="email" required><br><br>
            <label for="password">Password:</label>
            <input type="password" id="password" required><br><br>
            <button type="button" onclick="login()">Login</button>
        </form>
    </div>

    <div id="signup-container">
        <h2>Sign Up</h2>
        <form id="signup-form">
            <label for="signup-email">Email:</label>
            <input type="email" id="signup-email" required><br><br>
            <label for="signup-password">Password:</label>
            <input type="password" id="signup-password" required><br><br>
            <button type="button" onclick="signup()">Sign Up</button>
        </form>
    </div>

    <script>
        // 修正注释格式，粘贴Firebase控制台获取的配置信息
        const firebaseConfig = {
            // 示例配置，替换为你的实际信息
            apiKey: "YOUR_API_KEY",
            authDomain: "YOUR_AUTH_DOMAIN",
            projectId: "YOUR_PROJECT_ID",
            storageBucket: "YOUR_STORAGE_BUCKET",
            messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
            appId: "YOUR_APP_ID"
        };

        // 初始化Firebase（兼容旧版写法）
        firebase.initializeApp(firebaseConfig);

        // 登录函数
        function login() {
            const email = document.getElementById("email").value;
            const password = document.getElementById("password").value;

            firebase.auth().signInWithEmailAndPassword(email, password)
                .then((userCredential) => {
                    const user = userCredential.user;
                    console.log("Logged in as: ", user.email);
                })
                .catch((error) => {
                    const errorCode = error.code;
                    const errorMessage = error.message;
                    console.error("Error: ", errorCode, errorMessage);
                });
        }

        // 注册函数
        function signup() {
            const email = document.getElementById("signup-email").value;
            const password = document.getElementById("signup-password").value;

            firebase.auth().createUserWithEmailAndPassword(email, password)
                .then((userCredential) => {
                    const user = userCredential.user;
                    console.log("Signed up as: ", user.email);
                    // 可选：将用户信息写入数据库
                    // firebase.database().ref('users/' + user.uid).set({
                    //     email: user.email
                    // });
                })
                .catch((error) => {
                    const errorCode = error.code;
                    const errorMessage = error.message;
                    console.error("Error: ", errorCode, errorMessage);
                });
        }
    </script>
</body>
</html>

额外提示 #

1. 需在Firebase控制台的Authentication -> Sign-in method中启用「电子邮件/密码」登录方式。
2. 若要将用户信息写入Realtime Database，需在数据库规则中设置适当权限（开发环境可暂时设为{ "rules": { ".read": true, ".write": true } }，生产环境需严格限制）。

内容的提问来源于stack exchange，提问作者Alexander James Stephens