我试图在Next.js 13.4中获取[id] URL参数，但我得到一个错误，说params未定义。
我一直在互联网上搜索并要求ChatGPT，但我找到的都是Next.js旧版本的代码，而不是Next.js 13.2+的新功能。
我从另一个项目中得到了这个代码示例，它工作得很好：

import Link from "next/link";

const fetchPost = (id) => {
  return fetch(`https://jsonplaceholder.typicode.com/posts/${id}`, {
    next: { revalidate: 60 },
  }).then((res) => res.json());
};

export default async function Post({ children, params }) {
  const { id } = params;
  const post = await fetchPost(id);
  return (
    <article>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
      <Link href={`/posts/${id}/comments`}>View comments</Link>
      {children}
    </article>
  );
}

但是当我尝试将其调整到我的代码中时，它不起作用。
这是我的原始代码：（端点工作正常）

import styles from "./Post.module.css";

async function fetchPostById(id) {
  const response = await fetch(`http://localhost:3000/api/posts/${id}`);
  const post = await response.json();
  return post;
}

export default async function Post({ params }) {
  const { id } = params;
  const postById = await fetchPostById(id);
  console.log("Params: " + params);
  return (
    <>
      <li className={styles.li} key={postById.id}>
        <p className={styles.a}>
          <h3>{postById.title}</h3>
          <p>{postById.body}</p>
        </p>
      </li>
    </>
  );
}

我有这样的配置：

{
  "name": "demo-paco",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "eslint": "8.42.0",
    "eslint-config-next": "13.4.4",
    "next": "13.4.4",
    "react": "18.2.0",
    "react-dom": "18.2.0"
  },
  "devDependencies": {
    "@types/node": "20.2.5",
    "@types/react": "18.2.8"
  }
}

我得到这个错误：
- error app\posts\[id]\Post.jsx (10:10) @ id
- error TypeError: Cannot destructure property 'id' of 'params' as it is undefined. at Post (./app/posts/[id]/Post.jsx:17:13) at stringify (<anonymous>)
我设法让它工作，但在const params = useParams();行中，我得到了这个错误：TypeError: Cannot read properties of null (reading 'useContext')
更新代码：

"use client";

import { useParams } from "next/navigation";
import styles from "./Post.module.css";

async function fetchPostById(id) {
  const response = await fetch(`http://localhost:3000/api/posts/${id}`);
  const post = await response.json();
  return post;
}

export default async function Post() {
  const params = useParams();
  const id = params.id;
  const postById = await fetchPostById(id);
  return (
    <>
      <li className={styles.li} key={postById.id}>
        <p className={styles.a}>
          <h3>{postById.title}</h3>
          <p>{postById.body}</p>
        </p>
      </li>
    </>
  );
}

更新GLHF代码：
/app/posts/[id]内部的page.jsx：

import Link from "next/link";
import PostById from "./PostById";
import CommentsByPostId from "./CommentsByPostId";

export default async function PostPage({ params }) {
  const { id } = params;
  return (
    <section className="main">
      <Link className="goBack" href={"/posts"}>
        Go back
      </Link>
      <h1>Post:</h1>
      <PostById id={id} />
      <h1>Comments:</h1>
      <CommentsByPostId id={id} />
    </section>
  );
}

/app/posts/[id]内部的PostById.jsx：

import styles from "./PostById.module.css";

async function fetchPost(id) {
  const response = await fetch(`http://localhost:3000/api/posts/${id}`);
  const courses = await response.json();
  return courses;
}

export default async function PostById({ id }) {
  const post = await fetchPost(id);
  return (
    <article>
      {
        <li className={styles.li} key={post.id}>
          <h3 className={styles.colorBlack}>{post.title}</h3>
          <p className={styles.colorBlack}>{post.body}</p>
        </li>
      }
    </article>
  );
}