Firebase实时数据库首次查询无结果及查询限制排序问题

• 异常现象：Firebase实时数据库首次执行任何查询都无法获取响应，后续操作可正常运行。
• Firebase.js 初始化代码：

import firebase from 'firebase/compat/app';
import { getDatabase } from 'firebase/database';

// Your web app's Firebase configuration
const firebaseConfig = { *** }

const app = firebase.initializeApp(firebaseConfig);
export const auth = firebase.auth();
export const db = getDatabase(app);

• 首次无响应的API调用代码：

const wardrobeQuery = query(ref(db, dbName), limitToFirst(20));
get(wardrobeQuery).then((snapshot) => {
    snapshot.forEach((item) => {
        // 数据处理逻辑
    });
});

• 初始疑问：能否重构Firebase.js，让Firebase在用户登录成功后再初始化，确保进入落地页时API已就绪可加载数据？
• 补充说明：以下写法首次执行即可正常获取数据：

const snap: DataSnapshot = (await get(ref(getDatabase(), dbName)));

• 新疑问：如何在上述可正常运行的代码片段中实现结果数量限制及排序？

一、Firebase初始化时机调整 #

Firebase初始化和用户认证是独立流程，无需等到登录成功再初始化。但可以优化数据库操作的触发时机，确保认证状态就绪后再执行查询：

1. 保留Firebase基础初始化，封装数据库实例获取方法：

// Firebase.js 修改后代码
import firebase from 'firebase/compat/app';
import { getDatabase } from 'firebase/database';

const firebaseConfig = { *** };
const app = firebase.initializeApp(firebaseConfig);
export const auth = firebase.auth();
export const getDbInstance = () => getDatabase(app);

2. 在页面中监听用户认证状态，确认登录后再执行数据库查询：

auth.onAuthStateChanged((user) => {
    if (user) {
        // 用户已登录，执行数据库操作
        const db = getDbInstance();
        // 后续查询逻辑
    }
});

这样既保证Firebase初始化完成，又能避免因认证状态未就绪导致的查询异常。

二、结果数量限制与排序实现 #

在你提供的可正常运行代码中，直接通过query组合排序和数量限制方法即可，注意排序方法必须放在数量限制方法之前：

// 示例：按子节点createTime排序，取前20条数据
const db = getDatabase();
// 先调用排序方法，再设置数量限制
const wardrobeQuery = query(ref(db, dbName), orderByChild('createTime'), limitToFirst(20));
const snap: DataSnapshot = await get(wardrobeQuery);

关键注意点： #

• 排序与限制的顺序不可颠倒，否则Firebase会抛出错误。
• 使用orderByChild时，需在Firebase控制台的实时数据库规则中为对应的子节点添加索引，避免数据量大时出现性能问题或访问被拒绝。

内容的提问来源于stack exchange，提问作者storm-83