Firebase登录功能异常：showMessage未定义及本地存储失效问题

核心问题 #

控制台抛出的ReferenceError: showMessage is not defined是登录失败的直接原因。你的login.js是以模块脚本（type="module"）加载的，模块脚本拥有独立作用域，无法直接访问普通<script>标签中定义的全局函数（除非该函数显式挂载到window对象）。

你提到首次创建的账户能正常登录，大概率是首次登录未触发catch分支，then里的showMessage调用没执行到，错误未暴露；后续登录触发了错误分支，才触发了这个作用域问题。

修复方案 #

方案1：将showMessage挂载到全局window对象

修改script.js中的函数定义，让它成为全局可访问的函数：

window.showMessage = function(message, divId) {
    var messageDiv = document.getElementById(divId);
    messageDiv.style.display = "block";
    messageDiv.innerHTML = message;
    messageDiv.style.opacity = 1;
    setTimeout(function() {
        messageDiv.style.opacity = 0;
    }, 5000);
}

方案2：将showMessage直接移入login.js模块

把函数复制到login.js内部，放在Firebase初始化代码之后、事件监听代码之前：

// login.js
import { getAuth, createUserWithEmailAndPassword, signInWithEmailAndPassword } from "https://www.gstatic.com/firebasejs/10.11.1/firebase-auth.js";
import { getFirestore } from "https://www.gstatic.com/firebasejs/10.11.1/firebase-firestore.js";
import { initializeApp } from "https://www.gstatic.com/firebasejs/10.11.1/firebase-app.js";

// Firebase配置
const firebaseConfig = {
    apiKey: "-----",
    authDomain: "login-form-4a49f.firebaseapp.com",
    projectId: "login-form-4a49f",
    storageBucket: "login-form-4a49f.appspot.com",
    messagingSenderId: "660213923239",
    appId: "-----"
};

const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const db = getFirestore(app);

// 移入showMessage函数
function showMessage(message, divId) {
    var messageDiv = document.getElementById(divId);
    messageDiv.style.display = "block";
    messageDiv.innerHTML = message;
    messageDiv.style.opacity = 1;
    setTimeout(function() {
        messageDiv.style.opacity = 0;
    }, 5000);
}

// 登录事件监听
const signIn = document.getElementById('submitSignIn');
signIn.addEventListener('click', (event) => {
    event.preventDefault();
    const email = document.getElementById('email').value;
    const password = document.getElementById('password').value;

    signInWithEmailAndPassword(auth, email, password)
    .then((userCredential) => {
        showMessage('login is successful', 'signInMessage');
        const user = userCredential.user;
        localStorage.setItem('loggedInUserId', user.uid);
        window.location.href = 'home.html';
    })
    .catch((error) => {
        const errorCode = error.code;
        if (errorCode === 'auth/invalid-credential') {
            showMessage('Incorrect Email or Password', 'signInMessage');
        } else {
            showMessage('Account does not Exist', 'signInMessage');
        }
    })
})

方案3：模块化导出导入（推荐）

将工具函数封装成独立模块，通过ES模块语法导入：

1. 创建utils.js文件：

export function showMessage(message, divId) {
    var messageDiv = document.getElementById(divId);
    messageDiv.style.display = "block";
    messageDiv.innerHTML = message;
    messageDiv.style.opacity = 1;
    setTimeout(function() {
        messageDiv.style.opacity = 0;
    }, 5000);
}

2. 在login.js顶部导入：

import { showMessage } from './utils.js';
// 其他Firebase导入代码...

额外验证 #

修复后测试以下场景：

• 输入正确账号密码，确认localStorage能存储loggedInUserId并跳转到首页
• 输入错误密码/不存在的账号，确认错误提示能正常显示

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