Getting Unhandled Runtime Error TypeError: Cannot destructure property 'id' of 'router.query' as it is undefined

Question

I have a features page where whenver i click on particular features know more it has to move to the other page and display it's details based on the id.If I click on know more button it's going to a new page as well but it's not displaying the data based on id. Getting Unhandled Runtime Error TypeError: Cannot destructure property 'id' of 'router.query' as it is undefined. to nextjs for client side.Please anyone help.

"use client";
import React from "react";
import { useRouter } from "next/navigation";

const Page = () => {
  const router = useRouter();
  const { id } = router.query;

  // Check if id exists before rendering
  if (!id) {
    return <div>Loading...</div>;
  }

  return (
    <div>
      <div className="p-32 text-center">Hello feature {id}</div>
    </div>
  );
};

export default Page;

"use client";
import React, { useEffect, useState } from "react";

import { useRouter } from "next/navigation";

const NavFeatures = () => {
  const [navFeaturesData, setNavFeaturesData] = useState([]);
  const router = useRouter();
  useEffect(() => {
    console.log("Router Query in NavFeatures:", router.query);
    const fetchData = async () => {
      try {
        const response = await fetch(
          "http://localhost:1337/api/nav-feature/?populate=*"
        );
        const result = await response.json();
        setNavFeaturesData(result.data);
      } catch (error) {
        console.error("Error fetching data:", error);
      }
    };

    fetchData();
  }, []); // Empty dependency array means this effect will run once when the component mounts

  // const baseUrl = "http://localhost:1337";

  return (
    <>
      {navFeaturesData.map((data, index) => (
        <div
          key={data.id}
          className={
            index % 2 === 0
              ? "navFeatureContainer mt-20"
              : "navFeature1Layout mt-8 -mb-2 "
          }
        >
          {index % 2 === 0 ? (
            <>
              <div className="navFeatureLayout pt-12">
                <div className="navFeatureImg">
                  {/* <img
                    src={`${baseUrl}${data.attributes?.Image?.data?.attributes?.url}`}
                    alt="Feature Image"
                  /> */}
                </div>
                <div className="navFeatureContent">
                  <h2 className="navFeatureTitle">{data.attributes.Title}</h2>
                  <p className="navFeatureDesc">
                    {data.attributes.Description}
                  </p>
                  <button
                    className="featureKnowMore inline-flex py-2 px-4 focus:outline-none hover:bg-black"
                    onClick={() =>
                      data.id && router.push(`/features/${data.id}`)
                    }
                  >
                    Know More
                  </button>
                </div>
              </div>
            </>
          ) : (
            <>
              <div className={` sm:flex sm:w-full`}>
                <div className={`navFeatureContent sm:w-full`}>
                  <h2 className="navFeatureTitle">{data.attributes.Title}</h2>
                  <p className="navFeatureDesc">
                    {data.attributes.Description}
                  </p>
                  <button
                    className="featureKnowMore inline-flex py-2 px-4 focus:outline-none hover:bg-black"
                    onClick={() =>
                      data.id && router.push(`/features/${data.id}`)
                    }
                  >
                    Know More
                  </button>
                </div>
                <div className={`navFeatureImg sm:w-full`}>
                  {/* <img
          src={`${baseUrl}${data.attributes?.Image?.data?.attributes?.url}`}
          alt="Feature Image"
        /> */}
                </div>
              </div>
            </>
          )}
        </div>
      ))}
      <button className="ReleaseBtn2 mt-2  flex items-center mx-auto pb-1 text-center text-blurple p-10  hover:gap-2 hover:transition-transform duration-300 hover:text-black leading-6 transition-all duration-300">
        Show More
        <svg
          xmlns="http://www.w3.org/2000/svg"
          className="h-4 w-4 "
          viewBox="0 0 20 20"
          stroke="currentColor"
          fill="none"
        >
          <path strokeLinecap="round" strokeLinejoin="round" d="M6 9l4 4 4-4" />
        </svg>
      </button>
    </>
  );
};

export default NavFeatures;