您可以根据路由器位置动态更新 Firestore 查询吗？

Question

所以基本上，我有一个简单的 React 应用程序连接到 Firebase，它列出了来自 firestore 集合的不同类型的食物。

例子：

• 我有几个类别。默认为“全部”，显示所有其他可用类别中的前 8 种热门菜肴，这部分很简单，但我希望用户能够点击其他类别并更新我的查询。

Category 实际上是一个 NavLink，它会在点击时更新位置：

如果用户点击“Pizza”类别，则 url 看起来像这样 localhost:3000/Pizza
如果他点击 Salad，它是 localhost :3000/沙拉等

我有一个“墙”组件，它是一个部分，它显示来自 firestore 的那些项目。

我在这个墙组件中的查询引用如下所示：
const foodRef = db.collection("food").doc("all").collection("items");

但我想动态设置 .doc 并在每次更新时进行查询，所以我将查询更改为类似的内容：

const location = useLocation();
const foodRef = db.collection("food").doc('${location.pathname}').collection("items");

当用户点击不同的 Card (NavLink) url 更新但查询没有。

我知道这是一个糟糕的解决方案，但我实际上不知道该怎么做。
我已经阅读了 Recursive Paths in react router，但我不知道它是否是我正在寻找的。
如果您知道如何处理，请告诉我。

谢谢你的时间。

Answer 1

Firestore 不支持查询中的通配符或替换，并且 Query 对象是完全不可变的（它们无法更改）。您必须提前知道文档和集合的名称才能构建查询。如果要更改查询的某些部分，则必须每次都重新构建一个全新的查询对象，然后再次运行查询以获得新的集合结果。