对querySnapshot.docs调用reverse()方法未生效该如何解决？

问题原因 #

Firebase Firestore 返回的 QuerySnapshot 对象的 docs 是只读 getter 属性，并非普通可写数组属性：每次访问 querySnapshot.docs 时，Firestore 都会重新生成并返回一个全新的数组副本。你调用 reverse() 反转的只是本次访问生成的临时副本，不会对后续访问 docs 返回的新数组产生任何影响，所以两次打印的顺序完全一致。

你自行构造的模拟对象可以正常反转，是因为你直接给 docs 赋值为普通可写数组，每次访问都是同一个数组实例，reverse() 会直接修改原数组，因此可以生效。

解决方法 #

先将 docs 数组拷贝到本地变量，直接操作这个本地变量即可：

export async function getUserPosts(
  userId,
  getOldPosts = true,
  startAfter,
  limit = MAX_USER_POSTS_TO_RETRIEVE
) {
  // ...原有逻辑

  const query = userPostsRef
    .orderBy("date", getOldPosts ? "desc" : "asc")
    .startAfter(startAfter);

  const querySnapshot = await query.limit(limit).get();

  if(!getOldPosts) {
    // 拷贝docs数组到本地变量，后续都操作这个变量
    const docs = [...querySnapshot.docs];
    console.log("=== BEFORE ===");
    docs.forEach((prev) => {
      console.log(prev.data().date.toDate());
    });

    // 反转本地数组
    docs.reverse();

    console.log("=== AFTER FLIP ===");
    docs.forEach((prev) => {
      console.log(prev.data().date.toDate());
    });

    // 后续逻辑都使用反转后的docs变量即可
  }

  // ...原有逻辑
}

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