Reactjs 能否根据路由器位置动态更新firestore查询？

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

例如：

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

Category实际上是一个导航链接，用于在单击时更新位置，因此：

如果用户单击“Pizza”类别，则url看起来像这个localhost:3000/Pizza
如果他单击Salad，则是localhost:3000/Salda等。

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

此墙组件中的查询引用如下所示：

const foodRef=db.collection（“food”）.doc（“all”）.collection（“items”）

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

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

当用户点击不同的卡片（NavLink）时，url会更新，但查询不会

我知道这是一个糟糕的解决方案，但实际上我不知道如何做到这一点

我读过react路由器中的递归路径，但我不知道它是否是我正在寻找的

如果你知道如何处理，请让我知道



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