Javascript 如何从每个唯一的Firestore文档中检索1个图片URL，并使用该图片URL设置img.src？

我想进入特定集合中的每个文档并检索保存的picURL，然后将src设置为li中的img标记。我试过一个代码，它部分有效。它设置img src，但它是相同的src。我想检索两个（或更多）不同的picurl，并将它们设置为img src，设置为两个（或更多）唯一的img src。我希望这个问题有意义，因为它很难解释。我将添加一些图片和代码片段来帮助理解

Javascript:

var postDocRef = db.collection('posts').doc(uid).collection('userPosts')

postDocRef.get().then(snapshot => {
setupPosts(snapshot.docs)
})

const posts = document.querySelector('.posts');

const setupPosts = (data) => {
    let html = '';
    data.forEach(doc => {
        var docRefIDpost = docRef.id

        const post = doc.data();
        let li = `
        <li class="post">
            <div class="title">${post.title}</div>
            <div class="content">${post.content}</div>
        `;

        var imgRef = db.collection('posts').doc(uid).collection('userPosts');
        imgRef.get().then(function(snapshot) {
            
            if (snapshot.docs.length > 0) {
                
                let doc = snapshot.docs[0]
                    const data = doc.data();
                    const picURL = data.picURL

                    li += `<img class="img" src="${picURL}">`;         
            }

            li += "</li><br></br>";
            html += li
            posts.innerHTML = html;
        })
    })
}
});

var postDocRef=db.collection（'posts'）.doc（uid）.collection（'userPosts'）） postDocRef.get（）。然后（快照=>{ setupPosts（snapshot.docs） }) const posts=document.querySelector（'.posts'）； const setupPosts=（数据）=>{ 让html=''； data.forEach（doc=>{ var docRefIDpost=docRef.id const post=doc.data（）； 让李=`

${post.title} ${post.content} `; var imgRef=db.collection（'posts'）.doc（uid）.collection（'userPosts'）； imgRef.get（）.then（函数（快照）{ 如果（snapshot.docs.length>0）{ 让doc=snapshot.docs[0] const data=doc.data（）； const picURL=data.picURL li+=`； } li+=“

”； html+=li posts.innerHTML=html； }) }) } });

试试这个解决方案

var postDocRef = db.collection('posts').doc(uid).collection('userPosts')

postDocRef.get().then(snapshot => {
setupPosts(snapshot.docs)
})

const posts = document.querySelector('.posts');

const setupPosts = (data) => {
    let html = '';
    data.forEach(doc => {
        var docRefIDpost = docRef.id

        const post = doc.data();
        let li = `<li class="post">
            <div class="title">${post.title}</div>
            <div class="content">${post.content}</div>`;
        
        li += (post.picURL ? `<img class="img" src="${post.picURL}">` : ``);
        li += `</li><br></br>`;
        html += li
    })
    
    posts.innerHTML = html;
}

var postDocRef=db.collection（'posts'）.doc（uid）.collection（'userPosts'））
postDocRef.get（）。然后（快照=>{
setupPosts（snapshot.docs）
})
const posts=document.querySelector（'.posts'）；
const setupPosts=（数据）=>{
让html=''；
data.forEach（doc=>{
var docRefIDpost=docRef.id
const post=doc.data（）；
让li=`

${post.title}
${post.content}`；
li+=（post.picURL？`:``）；
li+=`


`；
html+=li
})
posts.innerHTML=html；
}

解决方案不起作用？如果没有，请共享更多详细信息。此解决方案有效，但我想在将picURL添加到li中的img标记之前检查文档中是否存在picURL。如果它不存在，我只想添加标题和内容。我尝试的代码做到了这一点，但在每篇文章中都添加了相同的图像。