useParams and useEffect, Parameter via ${id} in the useEffect function

This is the code, I receive the id in the console but not the response from the firestore server

import Item from './Item'
import { useState, useEffect } from "react";
import { useParams } from 'react-router-dom';
import {db} from "../Firebase"
import { collection, getDocs, query,} from "firebase/firestore";


const ContainerItems = () => {

    let idParam = useParams();
    const [ dataItem, setDataItem ] = useState([])


useEffect( () => {
    async function fetchData(){
    const querySnapshot = await getDocs(query(collection(db, `category/${(idParam)}/Items` )));
      let dataArray = []
      querySnapshot.forEach((doc) => {
        dataArray.push({...doc.data(), id: doc.id});
      });
      setDataItem(dataArray)
      console.log("Id",idParam)
    }
    fetchData();
}, [idParam])
    return (
        <>
            {dataItem.map((data)=>( 
                <Item item={data} key={data.id}/>
            ))}            
        </>
    )
}

export default ContainerItems;

the request to the server works, it just doesn’t work when I add ${idParam}

>Solution :

You need to get the idParam out of the object using destructuring.

let { idParam }  = useParams();

NOTE: Assuming you have named the path in the Route with the same name.

<Route path="/category/:idParam">...</Route>