如何在Firebase中仅展示字段匹配的文档？

我来帮你搞定这个问题！你当前的代码之所以会展示所有文档，主要有两个关键问题：一是你先获取了整个集合的所有文档再尝试前端过滤，但代码里的if/else逻辑完全一样，不管匹配与否都把元素添加到页面了；二是没有高效利用Firestore的查询能力，全量获取文档既浪费带宽也没必要。咱们一步步来修正：

1. 正确获取URL中的topic参数 #

首先得从URL的查询参数里拿到topic的值，用现代浏览器支持的URLSearchParams就可以轻松实现：

const urlParams = new URLSearchParams(window.location.search);
const topic = urlParams.get('topic'); // 当URL是https://example.com?topic=firebase时，这里会拿到"firebase"

2. 用Firestore查询直接过滤文档 #

不要全量获取整个product集合，而是用where条件直接在数据库层面过滤出符合条件的文档，这样只获取你需要的数据，效率更高：

const db = firebase.firestore();
// 只查询topic字段等于URL中获取到的topic值的文档
db.collection('product').where('topic', '==', topic).get().then((querySnapshot) => {
  querySnapshot.forEach((doc) => {
    // 因为已经过滤过了，直接渲染匹配的文档即可
    const li = ` <div> <img class="${img}" src="${doc.data().img}"> <p class="text-500 text-white">${doc.data().title}</p> </div> `;
    $('.app').append(li);
  });
}).catch((error) => {
  console.error('获取文档出错:', error);
});

3. 修复之前的逻辑错误 #

你之前的代码里，if和else块生成的li内容完全相同，不管文档的topic是否匹配，都会把元素添加到页面，这就是所有文档都显示的直接原因。用上面的Firestore查询后，我们只拿到匹配的文档，所以不需要再做前端判断，直接渲染就行。

完整的修正代码 #

把所有部分整合起来，完整的代码如下：

// 获取URL中的topic参数
const urlParams = new URLSearchParams(window.location.search);
const topic = urlParams.get('topic');
const img = "你的图片类名"; // 替换成你实际使用的img类名

const db = firebase.firestore();
// 带条件的查询
db.collection('product').where('topic', '==', topic).get().then((querySnapshot) => {
  const $app = $('.app');
  // 先清空容器，避免重复渲染
  $app.empty();
  querySnapshot.forEach((doc) => {
    const productData = doc.data();
    const li = ` <div> <img class="${img}" src="${productData.img}"> <p class="text-500 text-white">${productData.title}</p> </div> `;
    $app.append(li);
  });
}).catch((error) => {
  console.error('加载产品数据失败:', error);
});

<div class="app"></div>

额外提示 #

• 如果topic参数不存在（比如URL里没有?topic=xxx），你可以加个判断逻辑，比如提示用户选择主题，或者默认显示所有文档（根据你的业务需求调整）。
• 记得保留错误捕获逻辑，避免页面在遇到网络问题或权限不足时静默失败。

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