如何在Firebase Realtime DB v9中实现查询结果排序与数量限制

问题根因 #

snapshot.val() 返回的是普通JavaScript对象，而JS对象本身无法保证键的遍历顺序和Firebase服务端返回的排序结果一致，这就是你感知到排序功能失效的核心原因。

正确实现步骤 #

1. 调整查询参数 #

orderByChild('score') 默认按照分数升序排列，要获取得分最高的N条数据，直接搭配limitToLast(N)即可，例如取前10名的查询语句如下：

const scoreBoardRef = query(ref(db, 'users'), orderByChild('score'), limitToLast(10));

2. 按排序规则遍历快照 #

必须使用snapshot.forEach()方法遍历快照，该方法的遍历顺序严格遵循Firebase返回的排序结果，修改后的完整代码如下：

import { getDatabase, ref, onValue, query, orderByChild, limitToLast } from "https://www.gstatic.com/firebasejs/9.4.1/firebase-database.js";
var namelist = $('.person');
var list = $('.scores');

const scoreBoardRef = query(ref(db, 'users'), orderByChild('score'), limitToLast(10));
onValue(scoreBoardRef, (snapshot) => {
    const sortedUsers = [];
    // 按服务端返回的升序顺序遍历所有子节点
    snapshot.forEach(childSnapshot => {
        const user = childSnapshot.val();
        sortedUsers.push({
            name: user.name,
            score: user.score
        });
    });
    // 反转数组得到得分从高到低的排序
    sortedUsers.reverse();
    
    // 遍历渲染前3/前10条数据到表格
    sortedUsers.forEach((user, index) => {
        // 避免下标超出DOM节点数量报错
        if(namelist[index] && list[index]){
            namelist[index].textContent = user.name;
            list[index].textContent = user.score;
        }
    });
}); 

补充说明 #

• 如果不需要限制返回条数，只需要去掉查询参数里的limitToLast(10)即可，遍历后取前N项渲染也能实现效果，数据量大时建议在查询阶段就限制返回条数减少性能消耗
• 如果需要升序展示（得分最低在前），不需要执行数组反转操作即可直接使用

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