如何正确使用Firebase中来自不同模块的两个ref方法？

问题原因 #

该报错是因为 firebase/database 和 firebase/storage 两个 SDK 包都导出了同名的 ref 方法，直接导入到同一文件的全局作用域下，会触发变量重复声明的语法错误。

解决方案 #

使用 ES6 模块导入的 as 关键字，为同名的导入项设置自定义别名即可解决冲突，推荐使用语义化的别名方便后续代码区分不同用途的ref：

写法1：仅重命名冲突项（推荐） #

// 将数据库相关的 ref 重命名为 dbRef，存储相关的重命名为 storageRef
import { getDatabase, ref as dbRef, set } from "firebase/database";
import { getStorage, ref as storageRef } from "firebase/storage";

后续调用时直接对应别名使用即可，示例：

// 写入 Realtime Database 文本内容
const db = getDatabase();
set(dbRef(db, "自定义数据存储路径"), {
  text: "你要存储的文本内容"
});

// 创建 Storage 图片存储引用
const storage = getStorage();
const imgStorageRef = storageRef(storage, "图片存储目录/文件名.png");
// 后续正常调用上传方法即可

写法2：导入整个模块作为命名空间 #

如果不想单独修改冲突项的命名，也可以把整个模块导入为一个命名空间对象，所有方法都从该对象下调用：

import * as rtdb from "firebase/database";
import * as storage from "firebase/storage";

// 调用示例
const db = rtdb.getDatabase();
rtdb.set(rtdb.ref(db, "数据路径"), { text: "文本内容" });

const storageInstance = storage.getStorage();
const imgRef = storage.ref(storageInstance, "图片路径/xxx.png");

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