Next.js 15 筆記：searchParams 的正確處理模式

很長一段時間沒有碰觸 React 和 Next.js 了，近期的專案幾乎都在使用 Vue.js。剛好，趁著這次想打造自己的部落格網站，我決定把它當作一個重新複習、並熟悉 Next.js 15 的機會。

開發過程大致順利，直到我開始實作部落格的文章搜尋功能時，遇到了一個問題。
在我的規劃中，元件結構大概是這樣：

page.tsx -> BlockRenderer -> PostListBlock -> PostListComponent.tsx

我想在 PostListComponent 中，根據 URL 的查詢參數 (searchParams) 來篩選文章。按照過去的經驗，我把 searchParams 當成一個普通物件來處理，但卻一直遇到型別錯誤。

查了一下資料後，我才發現一個跟以前不一樣的地方：
「在 Next.js 15 的 App Router 中，searchParams 現在是一個 Promise。」

OK，既然是 Promise，那就用處理 Promise 的方式來解決。我當時最直接的想法，就是順著元件樹，把這個 searchParams Promise 一層層傳下去，直到 PostListComponent 裡面再來 await 它。雖然功能可以運作，但總覺得這樣傳遞 props 不是最好的方法。

後來，我請 Claude 幫我做 Code Review，它的建議很直接：

「應該在最頂層的 page.tsx 就 await 這個 Promise，取得解析完的物件，然後再把這個乾淨的物件傳給子元件。這樣一來，子元件接收到的就只是單純的資料，可以直接使用。」

這個建議點醒了我，一個簡單的調整，確實讓程式碼變得更清晰、更容易維護。

這算是一次小小的學習紀錄，提醒自己下次要記得這個模式。