firebase의 정보를 불러와 카드를 생성하는 과정에서 카드를 불러오지 않고 있습니다.

4주차 영상 강의를 보고 했는데 조금 헷갈리네요..

    <script type="module">
        import { initializeApp } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-app.js";
        import { getFirestore } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";
        import { collection, addDoc } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";
        import { getDocs } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";


        // For Firebase JS SDK v7.20.0 and later, measurementId is optional
        const firebaseConfig = {
            apiKey: "AIzaSyCsQr9q1bc9Q4gr_9rnNyfDp6XouINocVk",
            authDomain: "sparta-homework-5-week.firebaseapp.com",
            projectId: "sparta-homework-5-week",
            storageBucket: "sparta-homework-5-week.appspot.com",
            messagingSenderId: "546523981724",
            appId: "1:546523981724:web:c6129da3b942aaa1784a59",
            measurementId: "G-95XXLLYECT"
        };


        const app = initializeApp(firebaseConfig);
        const db = getFirestore(app);


        // 데이터 추가
        $("#addBtn").click(async function () {
            let title = $('#title').val();
            let comment = $('#comment').val();
            let star = $('#star').val();
            let image = $('#image').val();
            // title_input, comment_input, image_input id를 가진 HTML 요소에서 값을 가져와서 title, comment, image 변수에 저장해 주세요.
            let doc = {
                'title': title,
                'comment': comment,
                'star': star,
                'image': image
            };
            await addDoc(collection(db, "foods"), doc)


            try {
                const docRef = await addDoc(collection(db, "foods"), {


                    // 각각 담은 변수를 컬렉션 필드에 title, comment, image에 각각 넣어주세요.


                });


                alert("음식이 추가 되었습니다!");
                window.location.reload();
            } catch (e) {
                console.error("Error adding document: ", e);
            }
        });


        let docs = await getDocs(collection(db, "foods"));
        docs.forEach((doc) => {
            let row = doc.data();


            let title = row['title'];


            let comment = row['comment'];


            let star = row['star'];


            let image = row['image'];




            let temp_html = `


<div class="col">


<div class="card h-100">


<img src="${image}"


    class="card-img-top" alt="...">


<div class="card-body">


    <h4 class="card-title">${title}</h4>


    <p class="card-text">${comment}</p>


    <p class="card-text">${star}</p>


    <button class="card-button">주문하기</button>


</div>


</div>


</div>`;


            $(".row-cols-3").append(tempHtml);
        });


        // 데이터 읽기 및 카드 생성
        $(".row-cols-3").empty();


        const querySnapshot = await getDocs(collection(db, "foods"));




        querySnapshot.forEach((doc) => {


            let row = doc.data();


            let title = row['title'];


            let comment = row['comment'];


            let star = row['star'];


            let image = row['image'];




            let temp_html = `


    <div class="col">


        <div class="card h-100">


            <img src="${image}"


                class="card-img-top" alt="...">


            <div class="card-body">


                <h4 class="card-title">${title}</h4>


                <p class="card-text">${comment}</p>


                <p class="card-text">${star}</p>


                <button class="card-button">주문하기</button>


            </div>


        </div>


    </div>`;


            $(".row-cols-3").append(tempHtml);


        });


    </script>
</head>