TS2339: Property 'id' does not exist on type '{}'

user_1103606 0
Viewed 4141

I have a React form with Material-UI. I would like to get the id from the URL link using useParams and make some API requests in order to populate form-data:

http://localhost:3001/ticket-profile/9459377

Main app.tsx:

function App() {
  return (
      <Router>
        <Navbar />
        <Switch>
          <Route path='/ticket-profile/:id' component={TicketProfile} />
        </Switch>
      </Router>
  );
}

I use this code to open a new page and pass id param:

history.push(`/ticket-profile/${id}`)

I need to get the data into this page:

export default function TicketProfile(props: any) {
    let { id } = useParams();
    
    const [ticket, setTicket] = useState<TicketDTO[]>([]);

    useEffect(() => {
        getSingleTicket();    
    }, []);

    const getSingleTicket = async () => {
        getTicket(id)
            .then((resp) => {
                setTicket(resp.data);               
    }

But for this line let { id } I get:

TS2339: Property 'id' does not exist on type '{}'.

Do you know how I can fix this issue?

react-router-dom react-router typescript reactjs javascript
1 Answers

Using React Router with typescript suggests you need to pass the you are expecting.

From the page:

The useParams() method returns an object, and directly taking the property TS will prompt that the property does not exist in the empty object. According to the specification of TS, an interface can be defined in the dynamic routing component to define the parameters of routing.

Example:

// Home.tsx
interface RouteParams {
    id: string
}
export default () => {
    const params = useParams<RouteParams>();
    return (
        <div>
            { params.id }
        </div>
    )
}

Use this:

 let { id } = useParams<{id: string}>();
user_101401240
Related