I want to get data from Firestore in Next.JS like Reddit. For example (http://localhost:3000/r/BestBurger) in cloud firestore my data is in (/BestBurger/posts/posts/KrcvgXMX4HyNKPD1kRAR)

import { useRouter } from 'next/router';
import { useState, useEffect } from 'react';


import firebase from '../../firebase/clientApp';
import Card from '../../components/card/Card';
;




export default function Page() {
    const router = useRouter();
    const { page } = router.query;

    function usePosts() {
        const [posts, setPosts] = useState([])



        useEffect(() => {
            firebase
                .firestore()
                .collection(`${page}`).doc('posts').collection('posts')
                .onSnapshot((snapshot) => {
                    const newPosts = snapshot.docs.map((doc) => (
                        {
                            id: doc.id,
                            ...doc.data()
                        }))
                    setPosts(newPosts)
                }
                )
        }, [])

        return posts;
    }

    const posts = usePosts()
    console.log(posts)

    return (
        <>
            {
                posts.map((post) => (
                    <Card key={post.id}>
                        <h2>{post.title}</h2>
                        {post.body}
                    </Card>
                ))
            }
        </>
    )
}

Again, I want to get my page route to the .collection()