使用Firebase useCollectionData Hook无法设置orderBy，如何按字母排序？

要给Firestore子集合数据设置字母排序，你需要结合Firestore的query和orderBy方法构建带排序规则的查询，再传给useCollectionData。具体步骤如下：

1. 补充导入必要的Firestore方法 #

首先在导入部分添加query和orderBy：

import { useCollectionData } from "react-firebase-hooks/firestore";
import { collection, deleteDoc, doc, query, orderBy } from "firebase/firestore"; // 新增query和orderBy
import db from "../../firebase_2";

2. 构建带排序规则的查询 #

将原来的集合引用替换为带orderBy的查询，比如按englishWord字段字母升序排序：

// 先获取子集合引用，再构建带排序的查询
const collectionRef = collection(db, `default_data/${categoryName}/children`);
const sortedQuery = query(collectionRef, orderBy("englishWord"));
const [docs, loading, error] = useCollectionData(sortedQuery);

3. 处理Firestore索引要求 #

第一次运行代码时，Firebase会在控制台抛出错误，提示你需要创建对应的单字段索引。错误信息里会包含一个直接跳转Firebase控制台的链接，点击按提示完成索引创建即可。

备选方案：前端排序 #

如果暂时不想配置Firestore索引，也可以在前端对获取到的数据进行排序：

{changeWordList &&
  docs?.sort((a, b) => a.englishWord.localeCompare(b.englishWord)) // 按englishWord字母排序
    .map((item, index) => {
      return (
        <div>
          <div
            onClick={(event) =>
              handleClickChangeEverything(
                item.turkishWord,
                item.englishWord,
                event
              )
            }
            className={styles.container_single_card}
            key={item.uuid} // 建议用item.uuid作为key，比index更稳定
          >
            <div className={styles.word_part}>{item.englishWord}</div>
            <button
              className={styles.delete_button}
              onClick={() => handleDeleteSubCollection(item.uuid)}
            >
              <GoTrash />
            </button>
          </div>
        </div>
      );
    })}

注意：前端排序仅适合数据量较小的场景，数据量大时推荐用Firestore端排序，避免前端性能损耗。

内容的提问来源于stack exchange，提问作者Utku Ergün