Firebase doc does not accept the path specified using the received useRouter id in next.js

Question

I want to get data about the project, but I can’t do it dynamically, it just doesn’t accept the id.

const router = useRouter();
const {projectID} = router.query;
const getProject = doc(firestore, `projects/${projectID}`);

If specified statically and this works:

const getProject = doc(firestore, `projects/CEtVpthX9zMqUsyYSjEQ`);,

But when I tried to check string like

console.log(`projects/${projectID}` === `project/CEtVpthX9zMqUsyYSjEQ`)

and it says this equal. Also I tried using variables like

const path = `projects/${projectID}`;
const getProject = doc(firestore, path);

and

const path = `${projectID}`;
const getProject = doc(firestore, 'projects/' + path);

and its doesn't work.

I'm also tried to get id from url using useParams from react-router-dom, but it also doesnt work, because I couldnt get id.

Im try to explain:

const router = useRouter();
const {projectID} = router.query;
const path = `projects/${projectID}`;
const staticPath = `projects/CEtVpthX9zMqUsyYSjEQ`
console.log(path);
console.log(staticPath);
console.log(path===staticPath);
const getProject = doc(firestore, path);

its output that: telegra.ph/Output-with-dynamic-path-03-27 and if I use

const getProject = doc(firestore, staticPath);

its outputs that: telegra.ph/Output-with-static-path-03-27

Page full code:

function Projects(): JSX.Element {
    const router = useRouter();
    const {projectID} = router.query;
    const path = `${projectID}`;
    const getProject = doc(firestore, `projects/${projectID}`);

    const [isLoading, setIsLoading] = useState(false);
    const [project, setProject] = useState({})

    useEffect(() => {
        const fetchProjectData = async () => {
            setIsLoading(true);
            const docSnap = await getDoc(getProject);
            if (docSnap.exists()){
                const newProjectObj = {
                    id: docSnap.id,
                    ...docSnap.data()
                };
                setProject(newProjectObj);
                setIsLoading(false);
                console.log(docSnap.data());
            } else{
                console.log("Нет данных")
            }
        }
        fetchProjectData();
        return 
    }, []);
    if(isLoading) return <div>Загрузка...</div>;
    return (
        <>
        <div className={cn(styles.heading, styles.headBlock)}>
            {Object.keys(project) && Object.keys(project).length ?
                <div>
                  <ProjectDetailed project={project}/>
                  <CallBackBlock></CallBackBlock>
                </div>
            :null}
            
        </div>
        </>
    );
}

export default withLayout(Projects);