Невозможно деструктурировать свойство "id" "router.query", поскольку оно не определено

// data.js
export const data = {
    orders: [
        {
            id: 1,
            customer: "Customer A",
            items: [
                { id: 1, name: "Item 1", quantity: 5 },
                { id: 2, name: "Item 2", quantity: 3 }
            ],
            status: "Pending"
        },
        {
            id: 2,
            customer: "Customer B",
            items: [
                { id: 1, name: "Item 1", quantity: 2 },
                { id: 3, name: "Item 3", quantity: 1 }
            ],
            status: "Completed"
        }
    ],
    items: [
        { id: 1, name: "Item 1", stock: 20 },
        { id: 2, name: "Item 2", stock: 15 },
        { id: 3, name: "Item 3", stock: 10 }
    ]
};

//[id]\page.js
"use client";

import { useRouter } from "next/navigation";
import { data } from "../../../utils/data";

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

    if (!id) {
        return <div>No order ID provided</div>;
    }

    const order = data.orders.find(order => order.id === parseInt(id));

    if (!order) {
        return <div>Order not found</div>;
    }

    return (
        <div className = "container mx-auto p-4">
            <h1 className = "text-2xl font-bold mb-4">Order Details - {order.id}</h1>

            <p>Customer: {order.customer}</p>
            <p>Status: {order.status}</p>
            <h2 className = "text-xl font-semibold ">Items: </h2>
            <ul>
                {
                    order.items.map(item => (
                        <li key = {item.id} className = "border-b py-2">
                            <p>Name: {item.name}</p>
                            <p>Quantity: {item.quantity}</p>
                            <p>Stock: {data.items.find(i => i.id === item.id).stock}</p>
                        </li>
                    ))
                }
            </ul>
            <button className = "mt-4 bg-green-500 text-white px-4 py-2 rounded">Mark as Completed</button>
        </div>
    );
};

export default OrderDetails;

//orders\page.js
"use client";

import { useEffect, useState } from "react";
import { data } from "../../utils/data";
import Link from 'next/link';

const OrderList = () => {
    const [orders, setOrders] = useState(data.orders);
    const [filter, setFilter] = useState('');

    useEffect(() => {
        if (filter) {
            setOrders(data.orders.filter(order => order.status === filter));
        } else {
            setOrders(data.orders);
        }
    }, [filter]);

    return (
        <div className = "container mx-auto p-4">
            <h1 className = "text-2xl font-bold mb-4">Orders List</h1>
            <div className = "mb-4">
                <label htmlFor = "statusFilter" className = "mr-2">Filter by status:</label>
                <select
                    id = "statusFilter"
                    onChange = {e => setFilter(e.target.value)}
                    className = "border rounded px-2 py-1 bg-black"
                >
                    <option value = "">All</option>
                    <option value = "Pending">Pending</option>
                    <option value = "Completed">Completed</option>
                </select>
            </div>
            <ul>
                {orders.map(order => (
                    <li key = {order.id} className = "border-b py-2">
                        <div className = "flex justify-between">
                            <div>
                                <h2 className = "text-xl font-semibold">Order ID: {order.id}</h2>
                                <p>Customer: {order.customer}</p>
                                <p>Status: {order.status}</p>
                                <p>Item Count: {order.items.length}</p>
                            </div>
                            <Link href = {`/orders/` + orders.id}>
                                <button className = "text-blue-500">View Details</button>
                            </Link>
                        </div>
                    </li>
                ))}
            </ul>
        </div>
    );
};

export default OrderList;

//inventory\page.js
"use client";

import { useState } from "react";
import { data } from "../../utils/data";

const InventoryList = () => {
    const [items, setItems] = useState(data.items);

    const handleDelete = (id) => {
        setItems(items.filter(item => item.id !== id));
    };

    return (
        <div className = "container mx-auto p-4">
            <h1 className = "text-2xl font-bold mb-4">Inventory List</h1>
            <ul>
                {items.map(item => (
                    <li key = {item.id} className = "border-b py-2 flex justify-between">
                        <div>
                            <p>Name: {item.name}</p>
                            <p>Stock: {item.stock}</p>
                        </div>
                        <button
                            onClick = {() => handleDelete(item.id)}
                            className = "text-red-500"
                        >
                            Delete
                        </button>
                    </li>
                ))}
            </ul>
        </div>
    );
};

export default InventoryList;

Ошибка, которую я получаю:
скриншот ошибки

ожидаю увидеть подробности заказа на /orders/[id]

Ошибка, по-видимому, связана с тем, что объект router.query не определен, что приводит к возникновению ошибки TypeError при попытке деструктурировать из него свойство id.

Я попытался проверить значение router.query и убедиться, что в URL-адресе указаны необходимые параметры запроса, но ошибка не устранена.

Я не уверен, почему router.query в этом случае не определен, особенно если учесть, что этот компонент является частью приложения Next.js, где маршрутизация должна обрабатываться автоматически.

Мы будем очень признательны за любые идеи или предложения по устранению и устранению этой проблемы.