Firestoreの参照型フィールドの値からユーザー情報を取得できますか？

前提・実現したいこと

Next.jsとFirebaseを使用しています。

usersコレクションとpostsコレクションがあります。
postsコレクションのドキュメントは下記のように作成しています。

javascript
1await postsRef.add({
2  id: firebase.firestore().collection(users).doc(currentUser.uid),
3  title: "hoge",
4})

これにより、firestoreのコンソールで、下記のように表示されました。

firestore
1posts | ランダムな文字列 | id: /users/uid
2                         title: hoge

idの項目にマウスホバーをすると、（参照）と表示されました。

また、ユーザーコレクションは下記の通りです。

firestore
1users | uid | name: fuga
2              uid: uid
3              email: email@email.com
4              id: superboy
5　　　　　　　 // idは任意で変えられる文字列で、ユーザーページのURLにしようと思っています。

postsの一覧を取得するページで、postsのpostドキュメントのtitleを表示し、スラッグにユーザー情報のidを設定しようとしました。

javascript
1export const getStaticProps = async () => {
2  const posts = []
3  const postsRef = await db.collection('posts').get()
4  posts.forEach((doc) => {
5    const postData = doc.data()
6    postData.id.get().then((userDoc) => {
7      const data = {
8        userID: userDoc.data().id,
9        img: postData.title,
10      }
11      posts.push(data)
12    })
13  })
14  return {
15    props: {
16      posts,
17    },
18  }
19}
20
21const Posts = ({ posts }) => {
22  console.log(posts);
23  return(
24    <>
25      {posts.map((post) => {
26        <Link href={post.id} key={post.id}>
27          <a>{post.title}</a>
28        </Link>
29      })}
30    </>
31  )
32}

発生している問題・エラーメッセージ

TypeError: Cannot read property 'get' of undefined

試したこと

postData.idがどんなものか確認するため、userIDにpostData.idを直接代入したところ、下記のエラーが表示されました。

javascript
1Server Error
2Error: Error serializing `.postss[0].userID` returned from `getStaticProps` in "/".
3Reason: `undefined` cannot be serialized as JSON. Please use `null` or omit this value.
4
5This error happened while generating the page. Any console logs will be displayed in the terminal window.

Next.js の SSG で AMP-only のブログを作った | hbsnow.dev
エラーメッセージでググって出た上記ページにならって、getStaticPropsを下記のように修正しました。

export const getStaticProps = async () => {
  const posts = []
  const postsRef = await db.collection('posts').get()
  posts.forEach((doc) => {
    const postData = doc.data()
    postData.id.get().then((userDoc) => {
      const data = {
        userID: userDoc.data().id,
        img: postData.title,
      }
      const json = JSON.parse(JSON.stringify(data))
      posts.push(json)
    })
  })
  return {
    props: {
      posts,
    },
  }
}

結果、titleプロパティだけが入った配列が、コンソールに表示されました。