我的组件可以使用useRouter，但这需要useEffect，而且还会使我的组件依赖于路由本身...
useRouter似乎是显而易见的解决方案。我不完全理解您对组件依赖于路由的担忧。我猜它确实使Layout不太灵活，因为它需要知道post id存储在post_id查询变量中。但无论如何我都会这样做：）它为您提供了一种很好且简单的方式来访问查询变量，这些变量可以在BlogPost之外的Layout中使用，也可以在BlogPost内部使用的深度嵌套组件中使用。
使用每页布局方法：
/components/Layout

import { useRouter } from "next/router";
import { ReactNode } from "react";

export default function Layout({ children }: { children: ReactNode }) {
    const router = useRouter();
    return (
        <div>
            <h3>You are viewing post id #{router.query.post_id}</h3>
            {children}
        </div>
    );
}

/pages/blog/[post_id].jsx

import Layout from '../../components/Layout';

export default function BlogPost() {
    return <div>Hello World</div>
}

BlogPost.getLayout = function getLayout(page) {
    return (
        <Layout>
           {page}
        </Layout>
    )
}

/pages/_app.tsx（支持每页布局，从文档复制）

export default function MyApp({ Component, pageProps }) {
    // Use the layout defined at the page level, if available
    const getLayout = Component.getLayout || ((page) => page)

    return getLayout(<Component {...pageProps} />)
}

我认为最简单和最干净的方法是使用window.location.pathname。这会给予你域名后面的部分。例如

http://localhost:3001/blog/[post_id]/something

你将得到/blog/[post_id]/something

const pathname=window.location.pathname
const splittedPathname=pathname.split("/") // ['', 'blog', '[post_id]', 'something']

const dynamicId=splittedPathname[2]

你可以在useEffect中运行上面的代码并设置一个状态。或者你可以写一个钩子并在dynamicId组件下的组件中使用它

import React, { useState, useEffect } from "react";

const usePathname = () => {
  const [postId, setPostId] = useState("");

  useEffect(() => {
    const pathname = window.location.pathname;
    const splittedPathname = pathname.split("/");
    const dynamicId = splittedPathname[2];
    setPostId(dynamicId);
  }, []);

  return { postId };
};

export default usePathname;