添加Firebase后JavaScript函数无法触发，请求排查问题

添加Firebase后JavaScript出现异常，HTML和CSS均未改动，无法定位故障原因。相关项目为advanced-ePortfolio，包含代码仓库与在线构建版本。

提供的代码片段 #

function toggleModal() {
if (isModalOpen){
    isModalOpen = false;
    return document.body.classList.remove("modal--open");
}
isModalOpen = true;
// toggle modal
document.body.classList += " modal--open";
}


// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";
// TODO: Add SDKs for Firebase products that you want to use

// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
apiKey: #
};

const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);

故障排查方向与解决方案 #

1. Firebase配置缺失
   你提供的firebaseConfig仅包含apiKey，完整配置需补充authDomain、projectId、storageBucket、messagingSenderId、appId等必填字段，缺失会导致初始化失败抛出异常。需从Firebase控制台复制完整配置信息替换。

2. ES模块未启用
   直接使用import语句要求HTML中的script标签添加type="module"属性，否则会触发语法错误。修改script标签：

   <script type="module" src="你的脚本路径.js"></script>
   

3. 变量未声明
   isModalOpen变量未在代码中声明，若未全局定义或通过let/const声明，会导致ReferenceError。需在函数外添加声明：

   let isModalOpen = false;
   

4. Analytics初始化限制
   getAnalytics仅支持HTTPS环境（localhost除外），若部署环境不符合要求会报错。可通过isSupported条件初始化：

   import { getAnalytics, isSupported } from "firebase/analytics";
   
   async function initAnalytics() {
     if (await isSupported()) {
       const analytics = getAnalytics(app);
     }
   }
   initAnalytics();
   

5. 类名拼接问题
   使用document.body.classList += " modal--open"可能导致重复添加类名或意外修改class属性，推荐使用classList.add()替代：

   document.body.classList.add("modal--open");
   

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