Firestore分页以错误的顺序附加数组

Question

我正在尝试从最新到最旧（从下到上）对我的消息进行分页。我的查询有效，但在我查询新消息后它以错误的顺序附加数组。我确实关注了this 文章。这是我的逻辑：

//Global variables
let start = null
let end = null

collectionRef
      .orderBy('createTimestamp', 'desc')
      .limit(10)
      .get()
      .then(snapshot => {
        start = snapshot.docs[snapshot.docs.length - 1]
        if (start) {
          const listener = collectionRef
            .orderBy('createTimestamp')
            .startAt(start)
            .onSnapshot(messages => {
              messages.docChanges().forEach(change => {
                const message = this.convertObjectTimestampPropertiesToDate({
                  id: change.doc.id,
                  ...change.doc.data()
                })
                if (change.type === 'added') {
                  store.commit('chats/addMessage', message)
                }
              })
            })
          store.commit('chats/setObserver', listener)
        }
      })

如果我在消息列表的顶部，那么我会启动这个函数（这是我的消息顺序出错的部分。它将最大的时间戳项向上移动，小时间戳项向下移动，这是错误的。） ：

async getMoreMessages() {
    collectionRef
          .orderBy('createTimestamp', 'desc')
          .startAt(start)
          .limit(10)
          .get()
          .then(snapshot => {
            end = start
            start = snapshot.docs[snapshot.docs.length - 1]
            const listener = collectionRef
              .orderBy('createTimestamp')
              .startAt(start)
              .endBefore(end)
              .onSnapshot(messages => {
                messages.forEach(message => {
                  const mappedMessage = this.convertObjectTimestampPropertiesToDate(
                    {
                      id: message.id,
                      ...message.data()
                    }
                  )
                  store.commit('chats/addMessage', mappedMessage)
                })
              })
            store.commit('chats/setObserver', listener)
          })
       }

将消息添加到数组的我的 Vuex 突变：

addMessage: (state, message) => {
    const exists = state.messages.find(m => {
      return m.id === message.id
    })
    if (!exists) {
      state.messages.push(message)
    }
},

这是发生了什么的可视化：

这是我运行getMoreMessages() 后的控制台日志：

    TEXT 9 TIMESTAMP Wed Sep 25 2019 16:14:09 GMT+0300 (Eastern European Summer Time)
chats.mutations.js?7021:29 TEXT 10 TIMESTAMP Wed Sep 25 2019 16:14:10 GMT+0300 (Eastern European Summer Time)
chats.mutations.js?7021:29 TEXT 11 TIMESTAMP Wed Sep 25 2019 16:14:11 GMT+0300 (Eastern European Summer Time)
chats.mutations.js?7021:29 TEXT 12 TIMESTAMP Wed Sep 25 2019 16:14:12 GMT+0300 (Eastern European Summer Time)
chats.mutations.js?7021:29 TEXT 13 TIMESTAMP Wed Sep 25 2019 16:14:13 GMT+0300 (Eastern European Summer Time)
chats.mutations.js?7021:29 TEXT 14 TIMESTAMP Wed Sep 25 2019 16:14:14 GMT+0300 (Eastern European Summer Time)
chats.mutations.js?7021:29 TEXT 15 TIMESTAMP Wed Sep 25 2019 16:14:15 GMT+0300 (Eastern European Summer Time)
chats.mutations.js?7021:29 TEXT 16 TIMESTAMP Wed Sep 25 2019 16:14:16 GMT+0300 (Eastern European Summer Time)
chats.mutations.js?7021:29 TEXT 17 TIMESTAMP Wed Sep 25 2019 16:14:18 GMT+0300 (Eastern European Summer Time)
chats.mutations.js?7021:29 TEXT 18 TIMESTAMP Wed Sep 25 2019 16:14:19 GMT+0300 (Eastern European Summer Time)
chats.mutations.js?7021:29 TEXT 1 TIMESTAMP Wed Sep 25 2019 16:13:24 GMT+0300 (Eastern European Summer Time)
chats.mutations.js?7021:29 TEXT 2 TIMESTAMP Wed Sep 25 2019 16:13:43 GMT+0300 (Eastern European Summer Time)
chats.mutations.js?7021:29 TEXT 3 TIMESTAMP Wed Sep 25 2019 16:13:50 GMT+0300 (Eastern European Summer Time)
chats.mutations.js?7021:29 TEXT 4 TIMESTAMP Wed Sep 25 2019 16:14:05 GMT+0300 (Eastern European Summer Time)
chats.mutations.js?7021:29 TEXT 5 TIMESTAMP Wed Sep 25 2019 16:14:06 GMT+0300 (Eastern European Summer Time)
chats.mutations.js?7021:29 TEXT 6 TIMESTAMP Wed Sep 25 2019 16:14:07 GMT+0300 (Eastern European Summer Time)
chats.mutations.js?7021:29 TEXT 7 TIMESTAMP Wed Sep 25 2019 16:14:08 GMT+0300 (Eastern European Summer Time)
chats.mutations.js?7021:29 TEXT 8 TIMESTAMP Wed Sep 25 2019 16:14:08 GMT+0300 (Eastern European Summer Time)

我不明白我做错了什么。似乎查询工作正常，但附加逻辑失败。我试图做unshift() 而不是.push() 并在前端按时间戳排序，但它的顺序也错误。非常感谢任何帮助！

Answer 1

你在 orderBy 中缺少'desc' 吗？默认情况下，Firestore 将使用 asc，但我在您的第一次通话中看到您指定了 desc。