Firebase 呈现集合中的每个文档

我有这个 Firebase 数据库，我在其中作为集合存储不同的大陆。每个大洲都有一份文件，作为审查。每个文档都包含一些我想在用户选择文档时显示的信息。

我的问题是，每当我从 Firebase 查询一些数据时，集合中保存的所有内容都会呈现。

我给你看一张图：https : //imgur.com/a/ZuOKNCj

第一张图是我的数据库，第二张图是我查询的时候。

现在，我不确定这是因为我的 Firebase 查询代码还是其他原因。我已经用了几天的大脑，但我无处可去。

这是我查询的方式：

const useCountries = (continent) => {
    const [countries, setCountries] = useState([]);

    useEffect(() => {
        console.log(continent)
        firebase
            .firestore()
            .collection(continent)
            .onSnapshot((snapshot) => {
                const newCountries = snapshot.docs.map((doc) => ({
                    id: doc.id,
                    ...doc.data()

                }))
                setCountries(newCountries)

            })

    }, [])
    return countries
}

我相当确定问题出在这段代码中。会是这样吗？我认为问题出在快照上，总是在聆听新内容并基本上呈现所有内容。

那么，我想展示什么？

好的，所以这是一个评论网站。我使用垂直导航栏来显示每个大陆，然后是一个显示评论名称的新导航栏。评论的名称也是文档的名称。

这段代码是包含名称的组件的一部分：

const CountryList = ({ continent, displayFields = [] }) => {
    const countries = useCountries(continent, revName);
 ...

    return (
        <div className="countries">
            {countries.map(country => (
                <div key={country.id}>
                    <div className="entry">

                        {displayFields.includes("dest1") && (
                            <div>Destination 1: {country.dest1}
                            </div>
                        )}
                        {displayFields.includes("continent") && (
                            <div>{country.continent}</div>
                        )}
                        {displayFields.includes("revName") && (
                            <div>{country.revName}</div>
                        )}

这是我想用来查询的 revName。

我希望我已经解释了自己，至少足够好。

编辑：https : //imgur.com/a/d9iJdO1这是使用大陆的垂直导航栏。我使用以下方法填充此导航栏：

 <Menu className="nav-icon">
    <CountryList
      continent={props.continent}
      displayFields={["countryName"]}
    />
  </Menu>

基本上，我调用 useCountries-hook 来创建要在此处显示的大陆数组。

谢谢！