خطأ في التعرف على المعامل id في Next js

تفقد هل المتغير البيئي NEXT_PUBLIC_API_DOMAIN قد تم تعريفه بشكل صحيح في ملف .env، وكمثال:

NEXT_PUBLIC_API_DOMAIN=http://localhost:3000

أو ضع ذلك في ملف next.config.js.

 
  env: {
    NEXT_PUBLIC_API_DOMAIN: 'http://localhost:3000',
  },
};

أيضًا تفقد أن استدعاء fetchProperty يتم بشكل صحيح وأنه يعيد البيانات المناسبة بإضافة بعض رسائل التصحيح للتأكد من أن الدالة تعمل كما هو متوقع.

بالمثل لـ useParams بإضافة رسالة تصحيح للتأكد من أن id يتم التعرف عليه بشكل صحيح.

"use client"
import React, { useEffect, useState } from "react";
import Link from "next/link";
import { useParams } from "next/navigation";
import { FaArrowLeft } from 'react-icons/fa';
import { fetchProperty } from "@/utils/requests";

const PropertyPage = () => {
  const [property, setProperty] = useState(null);
  const [loading, setLoading] = useState(true);
  const { id } = useParams();

  console.log("Property ID: ", id);

  useEffect(() => {
    const fetchPropertyData = async () => {
      if (!id) return;

      try {
        const property = await fetchProperty(id);
        setProperty(property);
      } catch (error) {
        console.error('Error fetching property: ', error);
      } finally {
        setLoading(false);
      }
    };

    fetchPropertyData();
  }, [id]);

  console.log("Property Data: ", property);

  if (loading) return <h1>Loading...</h1>;
  if (!property) return <h1>No Property Found</h1>;

  return (
    <>
      <section>
        <div className="container m-auto py-6 px-6">
          <Link
            href="/properties"
            className="text-green-500 hover:text-green-600 flex items-center"
          >
            <FaArrowLeft className="mr-2" /> Back to Properties
          </Link>
        </div>
      </section>

      <section className="bg-green-50">
        <div className="container m-auto py-10 px-6">
          <div className="grid grid-cols-1 md:grid-cols-70/30 w-full gap-6">
            <aside className="space-y-4">
              property single page
            </aside>
          </div>
        </div>
      </section>
    </>
  );
};

export default PropertyPage;

ولنتفقد هل الدالة fetchProperty تعمل بشكل صحيح، بإضافة بعض الرسائل التصحيحية للتأكد من أن البيانات تأتي كما هو متوقع.

const apiDomain = process.env.NEXT_PUBLIC_API_DOMAIN || null;

async function fetchProperty(id) {
  try {
    if (!apiDomain) {
      console.error('API domain not set');
      return null;
    }
    const res = await fetch(`${apiDomain}/properties/${id}`);
    if (!res.ok) {
      throw new Error("Failed to fetch data");
    }
    return res.json();
  } catch (error) {
    console.log(error);
    return null;
  }
}

export { fetchProperty };