docs: Improve Accuracy and Type Safety on Data Fetching Examples

docs/01-app/02-building-your-application/02-data-fetching/01-fetching.mdx

@@ -271,7 +271,7 @@ If you are using `fetch`, requests can be [memoized](/docs/app/building-your-app
 >
 > - In previous versions of Next.js, using `fetch` would have a default `cache` value of `force-cache`. This changed in version 15, to a default of `cache: no-store`.
 
-```tsx filename="app/page.tsx" switcher
+```tsx filename="app/blog/[id]/page.tsx" switcher
 import { notFound } from 'next/navigation'
 
 interface Post {
@@ -281,21 +281,21 @@ interface Post {
 }
 
 async function getPost(id: string) {
-  let res = await fetch(`https://api.vercel.app/blog/${id}`, {
+  const res = await fetch(`https://api.vercel.app/blog/${id}`, {
     cache: 'force-cache',
   })
-  let post: Post = await res.json()
+  const post: Post = await res.json()
   if (!post) notFound()
   return post
 }
 
 export async function generateStaticParams() {
-  let posts = await fetch('https://api.vercel.app/blog', {
+  const posts = await fetch('https://api.vercel.app/blog', {
     cache: 'force-cache',
   }).then((res) => res.json())
 
   return posts.map((post: Post) => ({
-    id: post.id,
+    id: String(post.id),
   }))
 }
 
@@ -304,7 +304,8 @@ export async function generateMetadata({
 }: {
   params: Promise<{ id: string }>
 }) {
-  let post = await getPost(params.id)
+  const { id } = await params
+  const post = await getPost(id)
 
   return {
     title: post.title,
@@ -316,7 +317,8 @@ export default async function Page({
 }: {
   params: Promise<{ id: string }>
 }) {
-  let post = await getPost(params.id)
+  const { id } = await params
+  const post = await getPost(id)
 
   return (
     <article>
@@ -327,36 +329,38 @@ export default async function Page({
 }
 ```
 
-```jsx filename="app/page.js" switcher
+```jsx filename="app/blog/[id]/page.js" switcher
 import { notFound } from 'next/navigation'
 
 async function getPost(id) {
-  let res = await fetch(`https://api.vercel.app/blog/${id}`)
-  let post = await res.json()
+  const res = await fetch(`https://api.vercel.app/blog/${id}`)
+  const post = await res.json()
   if (!post) notFound()
   return post
 }
 
 export async function generateStaticParams() {
-  let posts = await fetch('https://api.vercel.app/blog').then((res) =>
+  const posts = await fetch('https://api.vercel.app/blog').then((res) =>
     res.json()
   )
 
   return posts.map((post) => ({
-    id: post.id,
+    id: String(post.id),
   }))
 }
 
 export async function generateMetadata({ params }) {
-  let post = await getPost(params.id)
+  const { id } = await params
+  const post = await getPost(id)
 
   return {
     title: post.title,
   }
 }
 
 export default async function Page({ params }) {
-  let post = await getPost(params.id)
+  const { id } = await params
+  const post = await getPost(id)
 
   return (
     <article>