现有Web应用集成Firebase遇初始化错误，求正确文件结构与配置

一、修复firebase.json配置错误 #

你的firebase.json位于/MY_APP/src/dist/，Firebase Hosting的public路径是相对于该文件所在目录的，之前的路径配置错误导致无法识别主应用目录：

1. 修改配置文件，将public指向你的主应用根目录：

   {
     "hosting": {
       "public": "../../",  // 从dist目录向上两级定位到MY_APP
       "ignore": [
         "firebase.json",
         "**/.*",
         "**/node_modules/**",
         "src/dist/ManresaSegura"  // 可选：忽略Firebase生成的示例目录，避免混淆
       ],
       "rewrites": [
         {
           "source": "**",
           "destination": "/index.html"  // 保持该配置，index.html在MY_APP根目录下
         }
       ]
     },
     "database": {
       "rules": "database.rules.json"
     }
   }
   

2. 注意：不要修改destination为../../index.html，因为public已经指向MY_APP，/index.html就是主页面的正确路径。

二、清除Firebase版本冲突，统一初始化方式 #

你同时引入了Firebase v2.2.1、v9模块化版本和compat兼容版本，这会导致严重的初始化冲突，必须统一方案：

推荐方案：使用Firebase v9模块化版本 #

1. 删除index.html中所有旧版本和compat版本的引入，只保留v9模块化相关代码：

   <!-- 移除以下旧版本和compat脚本 -->
   <!-- <script src='https://cdn.firebase.com/js/client/2.2.1/firebase.js'></script> -->
   <!-- <script defer src="/__/../node_modules/firebase/firebase-app-compat.js"></script> -->
   <!-- 所有其他firebase-*-compat.js文件全部删除 -->
   
   <!-- 仅保留模块化初始化脚本 -->
   <script type="module" src="src/index.js"></script>
   

2. 修改src/index.js，添加Firestore导入并将全局需要的变量挂载到window：

   import { initializeApp } from 'https://www.gstatic.com/firebasejs/9.0.0/firebase-app.js';
   import { getAuth, onAuthStateChanged } from 'https://www.gstatic.com/firebasejs/9.0.0/firebase-auth.js';
   import { getFirestore } from 'https://www.gstatic.com/firebasejs/9.0.0/firebase-firestore.js'; // 新增Firestore导入
   
   const firebaseApp = initializeApp({
       apiKey: "XXXXXX",
       authDomain: "XXXXXXX",
       projectId: "XXXXXXXXXXXX",
       storageBucket: "XXXXXXXXXXX",
       messagingSenderId: "XXXXXXXXX",
       appId: "XXXXXXXXXXXXXXX",
       measurementId: "XXXXXXXXX"
   });
   
   const auth = getAuth(firebaseApp);
   const db = getFirestore(firebaseApp); // 初始化Firestore实例
   
   // 挂载到window，让页面其他脚本可访问
   window.db = db;
   window.auth = auth;
   

3. 删除src/dist/ManresaSegura/app.js的引入，该文件使用旧命名空间方式，与模块化版本冲突。

三、修复"db is not defined"错误 #

之前的按钮点击事件无法访问db，因为原代码中db是局部作用域变量。通过上面的步骤将db挂载到window后，修改按钮点击代码：

document.getElementById("boto-zonaInsegura").onclick = function () {
    const horaInput = document.querySelector(".input-time");  
    // 注意：要获取input的value值，而非元素本身
    db.collection("contact-form")
    .doc()
    .set({
        Hora: horaInput.value,
    })
    .then(() => {
        console.log("数据提交成功");
    })
    .catch((error) => {
        console.error("提交失败：", error);
    });
};

四、关于目录结构的疑问 #

不需要将代码复制到Firebase自动生成的ManresaSegura目录，只要正确配置firebase.json的public字段指向你的主应用目录，就能使用自己的index.html。Firebase生成的示例目录可以直接删除，避免混淆。

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