Firestoreで祖先ドキュメントが存在しない状態になってしまう

Question

前提

Next.jsのアプリからFirestoreに書き込みを行なっています。
追加はできるものの、ドキュメント名がグレーの斜体になっており
「祖先ドキュメントが存在しない」状態になってしまいます。

実現したいこと

getDocumentsでデータを取得したい為、公式ガイドに記載のあった
「警告: 存在しない祖先ドキュメントは、Console に表示されている場合でも、クエリとスナップショットには表示されません。クエリ結果に含めるには、ドキュメントを作成する必要があります。」を実現したいのですが、
何が間違っているのかわからない状況です。

該当のソースコード

export async function localData(
  id: string,
  data: any,
  key: string
): Promise<void> {
  const db = getFirestore();
  const docRef = doc(db, "collectionName", id, "subCollectionName", key);
  await setDoc(docRef, data, {
    merge: true,
  });
}

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

下層は斜体になっておらず、最上位の「collectionName」直下に新規作成した
「id」というドキュメントのみが、グレーの斜体になっています。

試したこと

第三引数 {merge:true} を削除してみましたが、変化はありませんでした。

補足情報（FW/ツールのバージョンなど）

"firebase": "^9.9.4",
"next": "12.2.5",
"react": "^17.0.2",

"@types/node": "18.7.15",
"@types/react": "18.0.18",
"@types/react-dom": "18.0.6",

アドバイスの程宜しくお願い致します。

追記

その後、新たに試したことで一応「斜体」の状態を脱することができました。
が、本当にこの記法でいいのか？という不安が残るので
一旦自己解決ではなく編集追記させていただきました。
※ご指摘が無いまま時間が経過しましたら、自己解決にて投稿致します。

export async function localData(
  id: string,
  data: any,
  key: string
): Promise<void> {
  const db = getFirestore();
  const docRef1 = doc(db, "collectionName", id);
  await setDoc(docRef1, data, {
    merge: true,
  });
  const docRef2 = doc(db, "collectionName", id, "subCollectionName", key);
  await setDoc(docRef2, data, {
    merge: true,
  });
}

Comments

[nqf6nbs]

その後、新たに試したことで一応「斜体」の状態を脱することができました。
が、本当にこの記法でいいのか？という不安が残るので
一旦自己解決ではなく編集追記させていただきました。
※ご指摘が無いまま時間が経過しましたら、自己解決にて投稿致します。

Answer 1

setDocを2回に分けて行う事で解決しました。

export async function localData(
  id: string,
  data: any,
  key: string
): Promise<void> {
  const db = getFirestore();
  const docRef1 = doc(db, "collectionName", id);
  await setDoc(docRef1, data, {
    merge: true,
  });
  const docRef2 = doc(db, "collectionName", id, "subCollectionName", key);
  await setDoc(docRef2, data, {
    merge: true,
  });
}