如何将Firebase数据库引用传递至其他页面？如何单次声明该引用对象？

嗨，针对你提出的两个Firebase相关问题，我整理了实用的解决方案，一起来看看吧～

这里有几种靠谱的实现方式，你可以根据自己的项目场景选择：

• 全局变量挂载（快速上手）
  把初始化好的Firebase核心实例和用户专属引用挂载到window全局对象上，这样其他页面只要在加载Firebase SDK和初始化脚本之后，就能直接访问这些引用。比如修改你index.php里的代码：

  // index.php 中的JavaScript代码调整
  window.firebaseTools = {
      database: firebase.database(),
      auth: firebase.auth(),
      authProvider: new firebase.auth.GoogleAuthProvider()
  };
  
  // 存储用户专属引用的对象
  window.userFirebaseRefs = {};
  
  firebaseTools.auth.onAuthStateChanged(function(user){
      if (user) {
          userInfo = user;
          // 创建并挂载用户专属的数据库引用
          window.userFirebaseRefs.Attendances_dailyRef = firebaseTools.database.ref('Attendances_daily/'+user.uid );
          window.userFirebaseRefs.Attendances_monthlyRef = firebaseTools.database.ref('Attendances_monthly/'+user.uid );
          window.userFirebaseRefs.UsersRef = firebaseTools.database.ref('Users/'+user.uid );
      } else {
          // 用户退出时清空引用
          window.userFirebaseRefs = {};
      }
  });
  

  之后在其他页面，只要确保脚本加载顺序正确，就可以直接用window.userFirebaseRefs.Attendances_dailyRef来调用引用了。

• 模块化封装（推荐，更规范）
  把Firebase的初始化、引用创建逻辑封装成一个独立的JS模块，这样任何页面都可以通过导入模块来复用这些引用，还能避免全局变量污染。比如创建一个firebase-setup.js文件：

  // firebase-setup.js
  // 先导入Firebase的核心模块（如果用的是模块化SDK）
  import { initializeApp } from "firebase/app";
  import { getAuth, GoogleAuthProvider, onAuthStateChanged } from "firebase/auth";
  import { getDatabase, ref } from "firebase/database";
  
  // 替换成你自己的Firebase配置
  const firebaseConfig = {
      apiKey: "YOUR_API_KEY",
      authDomain: "YOUR_AUTH_DOMAIN",
      databaseURL: "YOUR_DATABASE_URL",
      projectId: "YOUR_PROJECT_ID",
      storageBucket: "YOUR_STORAGE_BUCKET",
      messagingSenderId: "YOUR_SENDER_ID",
      appId: "YOUR_APP_ID"
  };
  
  // 初始化Firebase应用（只执行一次）
  const app = initializeApp(firebaseConfig);
  
  // 创建核心实例（只声明一次）
  const auth = getAuth(app);
  const database = getDatabase(app);
  const authProvider = new GoogleAuthProvider();
  
  // 存储用户专属引用，初始为空
  let userSpecificRefs = {};
  
  // 监听认证状态，动态创建用户专属引用
  onAuthStateChanged(auth, (user) => {
      if (user) {
          userSpecificRefs = {
              Attendances_dailyRef: ref(database, `Attendances_daily/${user.uid}`),
              Attendances_monthlyRef: ref(database, `Attendances_monthly/${user.uid}`),
              UsersRef: ref(database, `Users/${user.uid}`)
          };
      } else {
          userSpecificRefs = {};
      }
  });
  
  // 导出所有需要复用的对象和引用
  export { auth, database, authProvider, userSpecificRefs };
  

  然后在其他页面的JS文件里，直接导入模块使用即可：

  import { auth, userSpecificRefs } from './firebase-setup.js';
  
  // 确保用户已认证后再使用引用
  auth.onAuthStateChanged((user) => {
      if (user && userSpecificRefs.Attendances_dailyRef) {
          // 比如监听每日考勤数据变化
          userSpecificRefs.Attendances_dailyRef.on('value', (snapshot) => {
              const data = snapshot.val();
              // 处理你的数据逻辑
          });
      }
  });
  

上面的两种方案其实已经完美解决了这个需求：

• 核心的database、auth实例我们只在初始化时创建一次，不会重复声明。
• 用户专属的引用（比如Attendances_dailyRef）则是在用户认证成功时动态创建一次，之后所有页面都可以复用这个已经创建好的引用，不需要重新声明。

需要注意的小细节：

• 确保所有页面都先加载Firebase SDK和你的初始化脚本/模块，否则会出现“引用未定义”的错误。
• 使用用户专属引用前，最好先判断用户是否处于登录状态，避免在未认证时调用空引用导致报错。

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