Not getting data from the firestore

JavaScript
1

Hello Everyone,
I tried to fetch docs from the firestore, it returns an empty array but when I run console.log(docs); outside the declared function, it returns the actual array. I know this error occurs because my useEffect function runs first before getting the docs from the firestore.
I want to know how to fix this issue.

const { docs } = useFirestore('books');
const id = props.match.params.id;

const loadContent = () => {
        const book = docs && docs.filter(doc => doc.id === id);
        console.log(book);
    }

    useEffect(() => {
        async function getContent(){
            await loadContent();
        }
        getContent()
    },[])
2

Hello there,

It might be more beneficial to see more of your code. Could you share a GitHub link/CodePen/CodeSandbox/Repl.it of your project?

The main issue is, why do you have that useEffect? What is it doing, other than waiting for the component to load, then waiting for it to load again?