使用URL参数查询Firestore数据库无数据返回问题排查

问题描述 #

尝试从Firebase的PlantsData集合中获取folderId与路由参数id匹配的植物数据，集合中存在对应数据，但程序无报错却未返回任何结果。

相关代码 #

const [user] = useAuthState(auth)

const {
  query: { id },
} = useRouter();

const [plants, setPlants] = useState();
const [loading, setLoading] = useState(true);

const getPlants= async () => {

  try {

    const PlantsQuery = query(
      collection(db, "PlantsData"),
      where("folderId", "==", id),
      orderBy("postedAt", "desc")
    );

    const plantsDocs = await getDocs(PlantsQuery);
    const plants = plantsDocs.docs.map((doc) => ({
      id: doc.id,
      ...doc.data(),
    }));

    setPlants((prev) => ({
      ...prev,
      plants: plants,
    }));

    setLoading(false);
  } catch (error) {
    console.log("error", error.message);
  }
};

useEffect(() => {
  if (id && user) {
    getPlants();
  }
}, [id, user]);

排查与修复步骤 #

1. 检查类型匹配问题 #

Firestore查询是类型严格匹配的，如果路由参数id是字符串，而Firestore中folderId是数字（或反之），会直接导致查询无结果。

• 调试：在getPlants函数开头加console.log("路由id:", id, "类型:", typeof id)，同时去Firebase控制台查看对应文档的folderId类型。
• 修复：统一类型，比如把路由参数转为数字：where("folderId", "==", Number(id))，或者确保Firestore中存储的folderId为字符串。

2. 验证Firestore权限配置 #

即使集合中有数据，如果安全规则限制了当前用户的访问权限，getDocs会返回空结果且不抛错（除非规则明确拒绝）。

• 调试（仅限开发环境）：临时修改安全规则为测试模式：

  rules_version = '2';
  service cloud.firestore {
    match /databases/{database}/documents {
      match /{document=**} {
        allow read, write: if request.time < timestamp.date(2025, 1, 1);
      }
    }
  }
  

  测试是否能返回数据，若可以则说明是权限问题，需调整规则确保当前用户有权限读取匹配的文档。

3. 确认路由参数获取是否正确 #

不同路由库的参数获取方式有差异，比如Next.js App Router中参数需从params而非query中获取：

• 修复：如果是App Router，改为：

  const { params } = useRouter();
  const { id } = params;
  

• 调试：在组件开头加console.log("路由参数:", query)，确认id是否获取到了预期值。

4. 修正状态更新逻辑 #

当前代码将数据存入对象的plants属性，但初始状态为undefined，后续使用时可能因嵌套结构导致数据访问错误。

• 修复：直接用数组管理状态：

  // 初始状态设为空数组
  const [plants, setPlants] = useState([]);
  
  // 更新状态时直接赋值
  setPlants(plants);
  

  这样后续渲染时可直接遍历plants数组，避免结构问题。

5. 在Firebase控制台验证查询 #

直接在Firebase控制台的查询编辑器执行相同条件的查询：

• 操作：打开Firebase控制台 → Firestore数据库 → 集合PlantsData → 查询编辑器 → 添加条件folderId == [你的路由id值]，添加排序postedAt 降序，执行后查看是否有结果。如果控制台也查不到，说明数据的folderId值和预期的路由id不匹配。

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