React路由加载时Firestore出现意外读取的问题排查

我已知晓写入数据库时打开控制台会消耗读取量，但本次问题并非如此。我想咨询：应用首次加载时，即便未点击任何页面，所有路由对应的组件是否都会挂载并触发Firestore数据请求？

我的路由结构 #

<App>
  <NavBar />
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="page1" element={<Page1 />} />
      <Route path="page2" element={<Page2 />} />
    </Routes>
</App>

组件数据请求逻辑 #

Page1和Page2组件均通过空依赖项的useEffect在挂载时从Firestore获取数据，代码示例如下：

useEffect(() => {
    
  async function fetchData() {
            
    try {
      const colRef = doc(db, 'COLLECTION')
      const myDocs = await getDocs(colRef)
      ... //do something to get the data from each doc
      setData(data)
        
    } catch (error) {
      console.error(error)
        
    }
  }
  fetchData()
}, []) //only once on mounting component

当前现象与尝试 #

执行npm run dev后，我未对浏览器进行任何操作，仅停留在Home页面，就发现Firestore控制台的读取量骤增。我尝试过懒加载但未解决问题，希望找到避免不必要读取的方法。

内容的提问来源于stack exchange，提问作者jose m ruiz