React + Firebase Firestore根据指定用户ID获取帖子报错求助

错误原因 #

报错TypeError: getDocs(...).where is not a function的核心原因是查询方法调用顺序错误：

• getDocs()是执行查询并返回结果的方法，它返回的是Promise<QuerySnapshot>，而非可链式调用的Query对象。
• 你错误地在getDocs(postRef)之后调用.where()和.orderBy()，完全不符合Firestore的查询逻辑。

正确逻辑是：先基于集合引用构建包含筛选/排序条件的Query对象，再用getDocs()执行这个查询。

修正后的代码 #

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

首先需要导入query、where、orderBy三个方法：

import React, { useEffect, useState } from 'react'
import { collection, getDocs, query, where, orderBy } from "firebase/firestore"; // 补充缺失的导入
import { db } from '../firebase-config'

2. 调整查询逻辑 #

修改useEffect内的代码，先构建带条件的查询，再执行获取操作：

const [posts, setPosts] = useState([])
const postRef = collection(db, "posts")

useEffect(() => {
  const getPost = async () => {
    // 第一步：构建包含筛选和排序规则的查询对象
    const filteredQuery = query(postRef, where('userId', '==', '12345'), orderBy("createdAt"));
    // 第二步：执行查询获取结果
    const querySnapshot = await getDocs(filteredQuery);
    
    setPosts(querySnapshot.docs.map((doc) => ({ ...doc.data(), id: doc.id })));
  };

  getPost();
}, []);

额外注意事项 #

如果运行后控制台提示需要创建复合索引，请按照提示链接进入Firestore控制台，创建userId与createdAt字段的复合索引——Firestore要求同时使用where和orderBy时，必须创建对应的复合索引，否则查询会失败。

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