React Native Firebase V9.1.1 Realtime Database如何按Date Key排序查询快照

失效原因 #

你当前查询排序失效的核心原因是：snapshot.val()会将查询结果转换为普通JavaScript对象，而JS普通对象的属性无法保证顺序，哪怕orderByChild('chatDate')已经从服务端拿到了有序的结果，转换为对象后排序规则也会丢失。

正确实现方式 #

不要直接调用snapshot.val()，而是通过snapshot.forEach方法遍历快照，该遍历过程会严格遵循查询返回的排序顺序，代码示例如下：

onValue(
  query(ref(db, chatBaseURL), orderByChild('chatDate')), 
  snapshot => {
    const sortedChats = []
    // 按排序顺序遍历所有子节点
    snapshot.forEach(childSnap => {
      sortedChats.push({
        msgId: childSnap.key,
        ...childSnap.val()
      })
    })
    // sortedChats 即为按chatDate正序排列的聊天列表
    console.log(sortedChats)
  }
)

常见拓展需求 #

倒序排序（最新消息在前） #

• 数据量较小时：直接对上述得到的sortedChats数组调用reverse()即可。
• 数据量较大时：写入聊天数据时额外存储chatDateReverse字段，值为-chatDate（要求chatDate为时间戳格式），查询时改为orderByChild('chatDateReverse')，无需前端二次处理即可直接得到倒序结果。

性能优化配置 #

如果聊天节点数据量超过100条，建议在Firebase控制台的Realtime Database规则中为chatDate添加索引，避免查询性能下降和控制台警告，规则参考：

{
  "rules": {
    "<替换为你的chatBaseURL路径>": {
      ".indexOn": "chatDate"
    }
  }
}

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