实现实时搜索数据列表时遇orderByChild is not a function错误求助

你混淆了Firebase两个不同数据库的API：

• 代码中collection(db, "categories")是Firestore数据库的集合引用获取方式
• 但后续调用的orderByChild()、once('value')、snapshot.val()都是Realtime Database专属的API，Firestore的集合引用不存在这些方法，因此触发"orderByChild is not a function"错误。

根据你实际使用的数据库类型，选择对应修正方案：

方案1：使用Realtime Database（保留原有查询逻辑） #

如果你的数据存储在Realtime Database中，需将引用获取方式改为Realtime Database的API：

import { ref, orderByChild, startAt, endAt, once } from "firebase/database";

useEffect(() => {
  fetchSearchResults('');
}, []);

const fetchSearchResults = (query) => {
  // 改用Realtime Database的ref方法获取节点引用
  const ref = ref(db, "categories"); 

  ref
    .orderByChild('name') 
    .startAt(query)
    .endAt(query + '\uf8ff') 
    .once('value')
    .then((snapshot) => {
      if (snapshot.exists()) {
        const data = snapshot.val();
        const results = Object.values(data);
        setSearchResults(results);
      } else {
        setSearchResults([]);
      }
    })
}

注意：这里的db必须是Realtime Database的实例，不是Firestore的实例。

方案2：使用Firestore数据库（适配Firestore查询语法） #

如果你的数据存储在Firestore中，需将查询逻辑改为Firestore的API：

import { collection, query, orderBy, startAt, endAt, getDocs } from "firebase/firestore";

useEffect(() => {
  fetchSearchResults('');
}, []);

const fetchSearchResults = async (query) => {
  const colRef = collection(db, "categories");
  // 构建Firestore查询
  const q = query(
    colRef,
    orderBy("name"),
    startAt(query),
    endAt(query + '\uf8ff')
  );

  try {
    const snapshot = await getDocs(q);
    if (!snapshot.empty) {
      // Firestore快照需通过docs.map提取数据
      const results = snapshot.docs.map(doc => ({
        id: doc.id,
        ...doc.data()
      }));
      setSearchResults(results);
    } else {
      setSearchResults([]);
    }
  } catch (error) {
    console.error("搜索出错：", error);
  }
}

说明：Firestore的查询需通过query()方法组合条件，获取数据用getDocs()，快照数据需遍历docs数组提取，同时可以保留文档ID。

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