如何读取Firebase Realtime Database？ref.on不是函数报错如何解决

核心错误原因 #

• 变量命名冲突：你从firebase/database导入了工具函数ref，同时将创建的数据库引用实例命名为ref，导致命名覆盖，后续调用逻辑异常。
• API写法不匹配：你使用的是Firebase v9+ 模块化SDK，该版本已将事件监听方法从ref实例上剥离，不存在ref.on()的用法，相关方法需要单独导入使用。

修复方案 #

第一步：调整导入语句 #

新增导入onValue方法，对应原来的on('value')监听逻辑：

import { initializeApp } from "firebase/app";
import { getDatabase, ref, push, set, onValue } from "firebase/database";

第二步：调整业务代码 #

修改变量名避免冲突，使用导入的onValue方法绑定监听：

function readpixels() {
  const db = getDatabase();
  const pixelRef = ref(db, 'pixels');
  onValue(pixelRef, (snapshot) => {
    // snapshot.val() 可获取对应节点的全部数据
    console.log("read", snapshot.val())
  })
}

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