Webpack打包后调用Firebase Database方法报错，无法发起请求

你遇到的问题是因为Firebase v9+采用了模块化函数式API，不再支持v8版本的链式调用写法（比如wbRef.orderByChild()这种形式），所有查询操作需要通过对应的顶层函数来完成。

修正后的代码 #

首先补充导入所需的函数，然后用query()构建查询条件，再用get()替代原有的once('value')实现单次数据获取：

import { firebaseApp } from './firebase_config';
import {
    getDatabase,
    ref,
    query,  // 新增：用于构建查询
    orderByChild,
    equalTo, // 新增：用于设置匹配条件
    get      // 新增：替代once('value')获取单次数据
} from 'firebase/database';

const database = getDatabase(firebaseApp);
// ...
const wbRef = ref(database, 'collections');
// 用query函数组合引用和查询条件
const queryRef = query(wbRef, orderByChild('field1'), equalTo('value1'));

// 通过get获取数据，返回Promise
get(queryRef)
  .then(snapshot => {
    if (snapshot.exists()) {
      const data = snapshot.val();
      // 处理你的数据逻辑
    } else {
      console.log('未找到匹配的数据');
    }
  })
  .catch(error => {
    console.error('数据请求失败:', error);
  });

关键说明 #

1. 模块化API的核心逻辑：v9+版本中，所有对数据库的操作（查询、监听、读写）都需要通过顶层函数实现，不能再直接在ref对象上调用方法。
2. 实时监听替代方案：如果你需要实时监听数据变化（对应原on('value')），可以导入onValue函数，用法如下：

import { onValue } from 'firebase/database';

// 实时监听数据变化
onValue(queryRef, snapshot => {
  const data = snapshot.val();
  // 处理实时更新的数据
});

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