Firebase Google登录按钮点击无反应问题求助

核心错误点 #

1. HTML脚本引入语法错误
2. Firebase SDK未完成初始化
3. JavaScript语法错误（事件回调未闭合）
4. document.write破坏页面结构
5. 模板字符串语法误用

修正后的HTML代码 #

Welcome to Firebase Hosting

<!DOCTYPE html>

<!-- update the version number as needed -->
<script defer src="/__/firebase/9.17.2/firebase-app-compat.js"></script>
<script defer src="/__/firebase/9.17.2/firebase-auth-compat.js"></script>
<script defer src="/__/firebase/9.17.2/firebase-firestore-compat.js"></script>
<!-- 移除不需要的SDK，减少加载冗余 -->

<script>
  // 替换为你的Firebase项目配置（从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);
</script>
<script src="app.js"></script>

<button onclick="googleLogin()">
  Login in with google
</button>

修正后的JavaScript代码 #

document.addEventListener("DOMContentLoaded", event => {
    const app = firebase.app();
    const db = firebase.firestore();
    
    // 替换为你Firestore中已存在的文档ID，否则会获取空文档
    const testPost = db.collection('posts').doc('your-existing-doc-id');
    
    testPost.get().then(doc => {
        if (doc.exists) {
            const data = doc.data();
            // 用DOM插入替代document.write，避免覆盖页面
            const contentDiv = document.createElement('div');
            contentDiv.innerHTML = `${data.title}<br>${data.createdAt}`;
            document.body.appendChild(contentDiv);
        } else {
            console.log("目标文档不存在");
        }
    }).catch(err => {
        console.error("获取文档失败：", err);
    });
}); // 恢复被注释的事件回调闭合括号

function googleLogin() { 
    const provider = new firebase.auth.GoogleAuthProvider();
    firebase.auth().signInWithPopup(provider)
    .then(result => {
        const user = result.user;
        // 用DOM插入替代document.write
        const welcomeMsg = document.createElement('div');
        welcomeMsg.textContent = `Hello ${user.displayName}`;
        document.body.appendChild(welcomeMsg);
        console.log(user);
    })
    .catch(err => {
        console.error("登录失败：", err);
    });
}

错误说明与修复逻辑 #

1. 脚本引入错误：原代码中</script src = app.js>是完全错误的语法，改为标准的<script src="app.js"></script>，并确保在Firebase初始化后加载，保证firebase对象可用。
2. Firebase初始化缺失：必须调用firebase.initializeApp()传入项目配置，否则所有Firebase服务无法正常工作，配置信息可从Firebase控制台的项目设置中复制。
3. 事件回调未闭合：原代码中//console.log(app)});注释掉了事件回调的闭合括号，导致后续googleLogin函数处于语法错误的上下文，无法被识别。
4. document.write问题：页面加载完成后调用document.write会清空整个页面，导致登录按钮被移除，改用DOM元素创建插入的方式展示内容。
5. 模板字符串错误：'Hello ${user.displayName}'使用单引号无法解析变量，必须改用反引号`Hello ${user.displayName}`。

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