在Next.js中，如果'route.query‘不是可用选项，我如何将数据传递到动态路由？

// pages/[id].js

import { useRouter } from 'next/router';

const DynamicPage = ({ data }) => {
  const router = useRouter();
  const { id } = router.query;

  return (
    <div>
      <h1>Dynamic Page</h1>
      <p>Data: {data}</p>
      <p>ID: {id}</p>
    </div>
  );
};

export async function getServerSideProps(context) {
  const { query } = context;
  const data = "This is the data for dynamic page";

  return {
    props: {
      data,
    },
  };
}

export default DynamicPage;