引入Firebase SDK后外部JS文件函数失效的问题排查

你的代码存在几个关键问题，导致功能完全失效：

1. 未启用ES模块支持 #

你在main.js中使用了import语法，但HTML中的<script>标签没有声明为模块类型，浏览器无法解析ES模块语法，直接导致代码无法执行。

2. 未正确导入Firebase Auth相关模块 #

代码中使用了firebase.auth()和GoogleAuthProvider，但没有从Firebase SDK中导入对应的模块，导致firebase变量未定义，相关功能无法调用。

3. 元素选择错误 #

注销按钮的实际ID是logoutButton，但你绑定事件时选的是外层的div#logout，点击按钮不会触发事件。

4. 缺少错误捕获逻辑 #

登录、注销操作没有处理异常，即使出错也无法在控制台看到错误信息，难以排查问题。

修正后的代码 #

index.html（修改script标签）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>

<body>
    <div class="container">
        <div id="dashboard">
            <div id="userDetails">
                <p>Welcome to dashboard</p>
            </div>
            <div id="logout">
                <button id="logoutButton">Logout</button>
            </div>
        </div>
        <div id="loginForm">
            <button id="login">SignInWithGoogle</button>
        </div>
    </div>
    <!-- 添加type="module"声明模块 -->
    <script type="module" src="main.js"></script>
</body>

</html>

main.js（修正导入、元素选择和错误处理）

// 导入所需的Firebase模块
import { initializeApp } from "firebase/app";
import { getAuth, GoogleAuthProvider, signInWithPopup, signOut } from "firebase/auth";

// Your web app's Firebase configuration
const firebaseConfig = {
  apiKey: "AIzaSyBbXn11EFZ-B4UutkGbbvFFhddnqWFpDWc",
  authDomain: "test-app-c0aed.firebaseapp.com",
  projectId: "test-app-c0aed",
  storageBucket: "test-app-c0aed.appspot.com",
  messagingSenderId: "797893271922",
  appId: "1:797893271922:web:5fc8bade62add0ca573deb"
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
// 获取Auth实例
const auth = getAuth(app);
// 初始化Google登录提供者
const provider = new GoogleAuthProvider();

// 登录按钮事件绑定
document.getElementById('login').addEventListener("click", login);
function login() {
    console.log('login');
    // 使用auth实例调用登录方法
    signInWithPopup(auth, provider)
    .then(res => {
        console.log(res);
    })
    // 添加错误捕获
    .catch(err => {
        console.error('登录出错:', err);
    })
}

// 注销按钮事件绑定（修正元素选择）
document.getElementById('logoutButton').addEventListener("click", logout);
function logout() {
    console.log('logout');
    // 调用注销方法
    signOut(auth)
    .then(() => {
        console.log('注销成功');
    })
    .catch(err => {
        console.error('注销出错:', err);
    })
}

内容的提问来源于stack exchange，提问作者Syed Talal Jilani