如何在加载组件之前加载数据?

我正在从firebase数据库中获取数据,但无法显示数据,因为首先执行组件,然后加载数据。我怎样才能以正确的方式解决这个问题?数据加载部分工作得很好,只是我的地图功能是先加载,然后加载数据,所以它不会被显示。

import Navbar from '../../components/navbar/navbar'
import './playlist.css'
import {useEffect, useState } from 'react'
import album from '../../assets/album1.jpeg'
import { collection, getDocs ,query, where} from 'firebase/firestore'
import { db ,storage} from '../../config/firebase'
import { getDownloadURL, ref } from "firebase/storage";
import { useNavigate,useParams } from 'react-router'
import SongDetail from '../../components/song-detail/songDetail'
function Playlist(){
    const navigate = useNavigate();
    const {id} = useParams()
    const [dataBase, setDataBase]=useState()
    const [songDB,setSongDB] = useState([])
    const [count,setCount] =useState(0) 
    // var dataBase = [1,2,3,4,5,6,7]
    const [Url,setUrl] = useState()
    useEffect(()=>{
        const PlaylistCollectionRef = collection(db, "playlist")
        const fetchData = async ()=>{
            try{
                const q = query(PlaylistCollectionRef, where("PlaylistId", "==", id))
                const data = await getDocs(q)
                // const data = await getDocs(PlaylistCollectionRef)
                const filteredData = data.docs.map((doc)=>({...doc.data(), id:doc.id}))
                setDataBase(filteredData)
                if(filteredData){
                    filteredData[0].Songs.map((data,i)=> performDownload(data) )
                    console.log("FILTER",filteredData)
                }
                // handleDownload(filteredData[0].albumUrl)
            }catch(error){
                console.log(error)
            }    
        }
        fetchData()
    },[count])
    // const downloadSongData = async()=>{
        
    //     if(dataBase?.length > 0){
    //         console.log("DB :: ",dataBase)
    //         dataBase[0].Songs.map((data,i)=> performDownload(data) )
    //         console.log(dataBase[0]?.Songs)
    //     }
    // }
    const performDownload = async(songID)=>{
        const SongCollectionRef = collection(db, "music")
        const q = query(SongCollectionRef, where("SongId", "==", songID))
        const data = await getDocs(q)
        // const data = await getDocs(PlaylistCollectionRef)
        const filteredData1 = data.docs.map((doc)=>({...doc.data(), id:doc.id}))
        songDB.push({
            filteredData1
        })
        console.log("SONG DB",songDB)
        console.log("SONG NAME",songDB[0]?.filteredData1[0].SongName)

    }

    

    return(
        <div className="playlist-wrapper" id='playlist-id'>
            <div className="playlist-navbar">
                <Navbar/>
            </div>
            <div className="playlist-main">
                <div className="playlist-main-section-1">
                    <div className="playlist-main-section-1-subsection">
                    <div className="playlist-section-1-back">
                        <button>BACK</button>
                    </div>
                    <div className="playlist-section-1-front">
                        <div className="playlist-subsection-images">
                            <div className="playlist-img-box">
                                <img src={album} alt="" />
                            </div>
                        </div>
                        <div className="playlist-subsection-controls">
                            <div className="playlist-subsection-controls-name">
                                <h1>MY PLAYLIST</h1>
                            </div>
                            <div className="playlist-subsection-controls-control">
                                <button>Play</button>
                                <button>Add</button>
                            </div>
                        </div>
                    </div>
                    </div>
                </div>
                <div className="playlist-main-section-2">
                    <div className="playlist-playlist-subsection">

                        {
                            dataBase ?
                            dataBase[0].Songs.map((data,i)=>
                                <SongDetail 
                                    playlistId = {id}
                                    albumId = {data.albumId}
                                    num = {i+1}
                                    name = {songDB[i*2]?.filteredData1[0].SongName}
                                />
                            )
                            : "LOADING" 
                        }
                    </div>
                </div>
            </div>
        </div>
    )
}
export default Playlist