问为什么这个反应组件被渲染了4次？

EN

import { collection, getDocs, onSnapshot, orderBy, query } from 'firebase/firestore';
import React, { useState, useEffect, Fragment } from 'react'
import { db, firebaseApp } from '../../firebase'

export default function Speisekarte() { 

    const [menus, setMenus] = useState([]);
    const [loading, setLoading] = useState(false);

   console.log(menus); // line 10: gives me 3 empty arrays and one filled array in the console
   

    function getMenu(){
    
    setLoading(true)
    const docRef = query(collection(db, "meals"), orderBy("id", "asc"));
    const unsubscribe = onSnapshot(docRef, (querySnapshot) => {
        const items = [];
        querySnapshot.forEach((doc) => {
            items.push(doc.data());
        });
        setMenus(items);
    });
    setLoading(false);
    unsubscribe();
}

useEffect(() => {
    getMenu();
},[]);

    return (
        <section className="menu">
          <div className="menu__container">
            <h1 className="menu__container__title">Menu</h1>
            {menus.map((item) => {
              const keys = Object.keys(item);
              return (
                <Fragment key={item.title}>
                        <h2>{item.title}</h2>
                        <div className="menu__container__item">
                        {keys.map((gericht) => (
                            <article className="menu__container__item-article" key={item[gericht].id}>
                                <div className="menu__container__item-article__row">
                                    <h3 className="menu__container__item-article__title">{item[gericht].title}</h3>
                                    <span className="menu__container__item-article__price">{item[gericht].price}</span>
                                </div>
                                <p className="menu__container__item-article__info">
                                    {item[gericht].desc}
                                </p>
                            </article>
                        ))}
                    </div>
                  
                </Fragment>
              );
            })}
          </div>
        </section>
      );
}

Array [] speisekarte.js:10:12
Array [] speisekarte.js:10:12
Array [] speisekarte.js:10:12
Array [ {…}, {…} ] speisekarte.js:10:12

import React from 'react';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import { AuthProvider } from './contexts/AuthContext';


import Navbar from './components/Navbar';
import Footer from './components/footer';
import Home from './pages/home'
import Speisekarte from './pages/speisekarte'
import Gallery from './pages/gallery'
import Kontakt from './pages/contact'
import Impressum from './pages/impressum';
import Signin from './pages/Signin';
import Admin from './pages/admin'

import './Sass/app.scss'




function App() {
  return (
    <AuthProvider>
       <div id="main">
        <Router>
          <Navbar />
          <Switch>
            <Route path="/" exact component={Home} />
            <Route path="/gallerie" component={Gallery} />
            <Route path="/kontakt" component={Kontakt} />
            <Route path="/impressum" component={Impressum} />
            <Route path="/speisekarte" component={Speisekarte} />
            <Route path="/signin" component={Signin} />
            <Route path="/admin" component={Admin} />
          </Switch>
          <Footer />
        </Router>
      </div>
    </AuthProvider>
   
  );
}

export default App;