【2025年最新】Next.js15における、paramsの扱い方

はじめに

Next.js15では、パラメーター ( params ) のプロパティに直接アクセスしようとすると、エラーが吐かれてしまいます。
このエラーを解決するのに、私自身なかなか苦労したので、備忘録としてここに書き残します。

エラー概要

プロパティにアクセスしようとすると、以下のようなエラーが吐かれると思います。

params is now a Promise and should be unwrapped with React.use() before accessing properties of the underlying params object.

つまり、params が Promise として渡される場合、その値を使う前に React.use() を使って解決する必要があるということです。

解決方法

1.　まずは、params の型定義を Promise に変更

• 変更前

src / app / [id] / page.tsx

export default function Example({ params }: { params: { id: number } }) {
    // コードを記述
};

• 変更後

src / app / [id] / page.tsx

export default function Example({ params }: { params: Promise<{ id: number }> }) {
    // コードを記述
};

2.　Promiseの params を use() を使ってアンラップ ( 加工 )

• 変更前

src / app / [id] / page.tsx

export default function Example({ params }: { params: Promise<{ id: number }> }) {
    // コードを記述
};

• 変更後

src / app / [id] / page.tsx

import { use } from "react";
export default function Example({ params }: { params: Promise<{ id: number }> }) {
    const unwrapParams = use(params);
    // コードを記述
};

3.　パラメーター ( params ) のプロパティにアクセス！！

• 変更前

src / app / [id] / page.tsx

import { use } from "react";
export default function Example({ params }: { params: Promise<{ id: number }> }) {
    const unwrapParams = use(params);
    // コードを記述
};

• 変更後

src / app / [id] / page.tsx

import { use } from "react";
export default function Example({ params }: { params: Promise<{ id: number }> }) {
    const unwrapParams = use(params);
    // プロパティにアクセス
    console.log(unwrapParams.id);
};

最後に

いかがでしたでしょうか？
初めての Qiita 投稿でつたない部分もあったと思いますが、皆さんの役に立てられれば幸いです。
これからも技術発信を続けますので、是非ほかの投稿記事もご覧ください！