//ele: 'h1'|'h2'|'h3'|'p'| etc...
function findText(children, ele) {
  if (children.tagName === ele) {
    const text = children.children[0].value
    const object = {
      element: ele,
      text: text,
    }
    return object
  }
}

function generateToc(htmlAst) {
  const tocArray = []
  const childrens = htmlAst.children
  // H2要素を見つけて目次に追加
  // (H3も見出しにしたい場合少し以下の部分を変えればいける
  childrens.forEach(children => {
    if (children.tagName === "h2") {
      const obj = findText(children, "h2")
      console.log(obj) //{ element: 'h2', text: 'はじめに' }
      tocArray.push(obj)
      console.log(tocArray) // [ { element: 'h2', text: 'はじめに' },{ element: 'h2', text: '本来のやり方' }]
    }
  })
  return tocArray
}

postResult.edges.forEach(({ node }) => {
  const path = `${node.fields.slug}`
  const htmlAst = node.htmlAst
  const tocs = generateToc(htmlAst)
  createPage({
    path: path,
    component: blogPost,
    context: {
      slug: path,
      tocs: tocs,
    },
  })
})

const PostTemplate = ({ data, pageContext }) => {
  const tocs = pageContext.tocs
  return (
    <Layout>
      // <Toc tocs={tocs} />
      <ol>
        {tocs.map((toc, index) => (
          <li key={`toc` + index} className="toc-h2">
            <a href={`#${toc.text}`}>{toc.text}</a>
          </li>
        ))}
      </ol>
    </Layout>
  )
}

<a href={`#${toc.text}`}>{toc.text}</a>

npm install rehype-react

import rehypeReact from "rehype-react"
import React, { useEffect, useState } from "react"

const renderAst = new rehypeReact({
  createElement: React.createElement,
  // components: {
  //   自分はここにいくつかComponentが入る
  // },
}).Compiler

const Post = ({ data, pageContext }) => {
  const [isAdd, setIsAdd] = useState(false) //何度も関数が動くケースがあったのを対策
  const { htmlAst } = data.post
  const tocs = pageContext.tocs

  function addIdToH2(tree) {
    if (isAdd) return //１回だけしか動かさない
    visit(tree, "element", node => {
      if (node.tagName === "h2") {
        const textNode = node.children.find(child => child.type === "text") //typeの例外に対応
        if (textNode) {
          const text = textNode.value.trim() //見出しに半角スペースなどがある際に対応
          node.properties = { ...node.properties, id: text } //idに見出しのテキストと同じものを付与。日本語なら日本語になる。見出しが同じものだった場合はページ内リンク動かないが、それは想定しない
        }
      }
    })
    setIsAdd(true) //１回だけしか動かさない
  }

  useEffect(() => {
    addIdToH2(htmlAst) // htmlAstは、tree上に出力される
  }, [htmlAst])

  return (
    <Layout>
      <ol>
        {tocs.map((toc, index) => (
          <li key={`toc` + index} className="toc-h2">
            <a href={`#${toc.text}`}>{toc.text}</a>
          </li>
        ))}
      </ol>
      <div className="my-20 post-body">{renderAst(htmlAst)}</div>
    </Layout>
  )
}

export const query = graphql`
  query PostBySlug($slug: String!) {
    post: markdownRemark(
      fields: { slug: { eq: $slug } }
    ) {
      id
      htmlAst //追加
      //以下略