React集成Firebase时报Cannot access 'ref' before initialization错误如何解决

• 核心原因是变量命名冲突：你从firebase/database中导入的API方法名为ref，但你在自定义的getDatabase方法内又声明了一个同名的常量const ref = ...。
• 受JavaScript暂时性死区规则约束：如果在当前作用域用const/let声明了和上层作用域同名的变量，该变量会被绑定到当前作用域，在声明语句执行完成前访问都会抛出「初始化前无法访问」的错误。你写ref(db, "data/")时，JS会优先匹配当前作用域的ref变量，而此时该变量还未完成声明赋值，因此直接报错。
• 额外注意：你自定义的方法名getDatabase和从Firebase导入的getDatabaseAPI也重名，后续调用时也可能触发相同的作用域冲突问题。

根据你的使用习惯选择任意一种即可：

方案1：修改本地常量名（更推荐） #

getDatabase =  () => {
    const db = getDatabase();
    // 把本地变量名改成和导入API不冲突的名字，比如dataRef
    const dataRef = ref(db, "data/")
    // 后续业务逻辑直接使用dataRef即可
}

方案2：导入时给ref方法设置别名 #

// 导入时重命名ref
import { getDatabase, ref as firebaseRef, onValue, set, push, child, remove } from 'firebase/database';
import {initializeFirebase} from './Firebase';

getDatabase =  () => {
    const db = getDatabase();
    const ref = firebaseRef(db, "data/")
}

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