Unhandled Runtime Error TypeError: Cannot destructure property 'id' of 'router.query'

Question

実現したいこと

詳細ページを作って表示させたい。

発生している問題・分からないこと

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

Source
app/todos/[id]/page.tsx (18:11) @ id

16 | // ルーティング情報を取得する
17 | const router = useRouter();

18 | const { id } = router.query;
| ^
19 |
20 | // SWRを使ってデータを取得する
21 | const { data: todo, error } = useSWR<TodoType>(id ? http://localhost:3000/todos/${id} : null,
どうしたらいいかわからない。

エラーメッセージ

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

Source
app/todos/[id]/page.tsx (18:11) @ id

16 | // ルーティング情報を取得する
17 | const router = useRouter();

18 | const { id } = router.query;
| ^
19 |
20 | // SWRを使ってデータを取得する
21 | const { data: todo, error } = useSWR<TodoType>(id ? http://localhost:3000/todos/${id} : null,

該当のソースコード

class TodosController < ApplicationController
    
    def index
        # 日付が新しい順に10件まで取得する
        @todos = Todo.all.order(created_at: :desc).limit(10)
    
        render json: @todos
    
    end
    
    def show
        @todo = Todo.find(params[:id])

      render json: @todo
    end
   

"use client";

import { useEffect, useState } from 'react';
import { useRouter } from 'next/navigation';
import useSWR from 'swr';
import Link from 'next/link';
import Todo from '@/components/Todo';
import { TodoType } from '@/types/Todo';
import axios from 'axios';

// Fetcher function for SWR
const fetcher = (url: string) => axios.get(url).then(res => res.data);

// Todo詳細ページを表示するコンポーネント
const TodoDetail = () => {
  // ルーティング情報を取得する
  const router = useRouter();
  const { id } = router.query;

  // SWRを使ってデータを取得する
  const { data: todo, error } = useSWR<TodoType>(id ? `http://localhost:3000/todos/${id}` : null, fetcher);

  // エラーが発生した場合の処理
  if (error) return <div>Failed to load</div>;

  // Todoを取得中の場合は「Loading...」を表示する
  if (!todo) return <div>Loading...</div>;

  return (
    <div className="flex justify-center items-center">
      <div className="flex flex-col space-y-6 w-3/4 max-w-lg pt-10">
        <label className="block text-xl font-bold text-gray-700">Todo</label>
        <Todo todo={todo} />
        <div className="flex justify-end">
          <Link
            href="/"
            className="mt-auto font-medium text-blue-600 hover:bg-blue-300 focus:outline-none"
          >
            Back
          </Link>
        </div>
      </div>
    </div>
  );
};

export default TodoDetail;

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

import { useRouter } from 'next/navigation';
に変えた

補足

特になし

Answer 1

const TodoDetail = ({ params }: { params: { id: string } }) => {
// ルーティング情報を取得する
const router = useRouter();
const { id } = params;

でいけました