Vue3集成Firebase报database.ref is not a function错误

代码存在4个直接触发错误的问题：

• SDK混用：同时导入了Realtime Database（实时数据库）和Cloud Firestore（云火储）两套完全独立的数据库SDK，你需要用实时数据库实现功能，却初始化了Firestore实例，调用Firestore不存在的.ref()方法直接触发类型错误
• 版本混用：同时混写Firebase v8兼容版SDK和v9模块化SDK，导入路径冲突、初始化逻辑不互通
• 笔误：addListing函数入参命名为listing，后续写路径、传值时错写为未定义的listings变量，直接触发引用错误
• 初始化缺失：初始化数据库实例时没有传入已创建的app实例，会导致上下文丢失、连接失败

// 统一使用Firebase v9模块化SDK，移除所有v8兼容版、Firestore相关冗余导入
import { initializeApp } from "firebase/app";
import { getDatabase, ref, get, remove, set } from "firebase/database";
import store from "./store";

const firebaseConfig = {
    apiKey: "",
    authDomain: "",
    projectId: "",
    // 此处必须填写Firebase控制台中Realtime Database的实际连接地址，留空会直接连接失败
    databaseURL: "",
    storageBucket: "",
    messagingSenderId: "",
    appId: "",
    measurementId: ""
};
  
const app = initializeApp(firebaseConfig);
// 初始化实时数据库实例，传入app上下文
const database = getDatabase(app);

export default async function setListingData() {
    try {
        const listingsRef = ref(database, "/listings");
        const snapshot = await get(listingsRef);
        if (snapshot.exists()) {
          let listings = [];
          snapshot.forEach((itemSnap) => {
            // 同步存储商品唯一ID，否则后续编辑、删除操作无法定位对应数据
            listings.push({
              id: itemSnap.key,
              ...itemSnap.val()
            });
          });
          console.log("读取商品列表成功:", listings);
          store.commit("initListings", listings);
          return snapshot.val();
        } else {
          console.log("暂无商品数据");
          // 无数据时传入空数组，避免前端列表渲染报错
          store.commit("initListings", []);
        }
    } catch (error) {
        console.error("读取商品列表失败:", error);
    }
  }
  
export function deleteListing(id) {
    const itemRef = ref(database, `/listings/${id}`);
    return remove(itemRef);
}
  
/**
 * 新增/编辑商品
 * @param {object} listing 商品数据，必须携带唯一id字段
 */
export function addListing(listing) {
    console.log("提交商品数据:", listing);
    const itemRef = ref(database, `/listings/${listing.id}`);
    return set(itemRef, listing);
}
  
export function emptyListing() {
    return {
      // 新增商品时默认生成唯一ID，避免ID为空导致路径写入错误
      id: Date.now().toString(),
      title: "",
      price: "",
      description: ""
    };
}

• 如果你习惯v8版本的链式调用写法，就把所有v9模块化的导入、API全替换成firebase/compat/路径下的对应内容，绝对不能跨版本混写
• 首次调试时去Firebase控制台的Realtime Database规则页面，临时将读写规则设置为允许测试访问，正式上线前必须加上用户鉴权逻辑，避免数据库被恶意读写
• 新增、删除、编辑操作建议加上async/await或者.then()回调，配合前端做加载提示、错误提示，提升交互体验

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