データベース(firestore)から取得したデータをリスト表示したい

前提・実現したいこと

こんにちは。
表題の件についてご教授ください。

やりたいことは「firestore」から取得した複数データをhtmlに表で表示したいです。

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

consoleには取得したデータが表示されており、特にエラーは発生していません。

該当のソースコード

htmlには以下のように

<div class = "content">
    <form id="add-inout-form"></form>

    <ul id="inout-list"></ul>
    
</div>

JavaScriptには以下のように

const inOutTime = document.querySelector('#inout-list');
        function renderTime(doc){
          
          let li = document.createElement('li');
          let name = document.createElement('span');
          let intime = document.createElement('span');

          li.setAttribute('data-id', doc.id);
          name.textContent = doc.data().name;
          intime.textContent = doc.data().intime;

          li.appendChild(name);
          li.appendChild(intime);

          inOutTime.appendChild(li);
        }

        db.collection(userId).get().then((snapshot) => {
          snapshot.docs.forEach(doc => {
            console.log(doc);
          })
        })

と書きましたがhtmlに値が表示されず途方に暮れています。

試したこと

YouTubeで見つけた動画にあったコードを写したのですが表示されませんでした。
JavaScriptに触れたのも最近の初心者なので初歩的なミスなのかもしれませんが、いろいろネットで検索しても解決に至らなかったので質問させて頂きました。
お分かりになる方がいらっしゃいましたら助けて頂けたら幸いです。