SvelteKit 流式 Promise 有时返回 0 个元素，有时返回一个已填充的数组

Question

我在 +page.server.ts 文件中编写了以下代码：

const mediaItemComments = mediaItemComment.getByRequestId(params.id).then(comment => {
    return comment
})

return {
    request,
    streamed: {
        record,
        mediaItemComments,
        client: user.get(request.clientId)
    }
}

这使用 getByRequestId 方法，在 db.ts 中定义：

export const mediaItemComment = {
    getByRequestId: async(id: string) => {
        const ref = await db
          .collection('mediaItemComments')
          .get()

        const comments = ref.docs.map((doc) => ({ id: doc.id, ...doc.data() })) // todo: add ts
        console.log('DB.TS ran and fetched these comments: ', comments.length)
        return comments;
   }
}

我的 page.svelte 文件使用此 Promise 作为其他组件的 StreamedComments 属性：

 <script>
    ....
    export let data;
</script>

{#each...}
    <Art index={i + 1} {art} streamedComments={data.streamed.mediaItemComments} {record} />
{/each}

Art组件使用SpecialCarousel组件，该组件使用MediaItemModal组件，如下：

<script>
    let comments = []
    onMount(async () => {
        try {
            console.log('onMount in MediaItemModal running with streamedComments', streamedComments)
            comments = await streamedComments
        } catch (error) {
            console.error('Failed to load comments:', error)
        }
    })

</script>

有时，Promise 中只有 8 条评论，而其他时候，它只有 0 条评论。当我打开应用程序时，10％的时间它会显示 Firebase 集合中的所有评论，而其他时候它会在前端的 Promise 中返回 0 条评论（当我在浏览器上登录时）。但是，在 db.ts 文件上，它始终记录为从数据库返回 8 个元素。不确定这里发生了什么。请指导。

我看到评论正在加载。我刷新页面。现在他们不再加载。通过添加空格和刷新随机更改代码时，有时会显示 1 次刷新的注释，但不会显示其他刷新的注释。我在这里很困惑。

Answer 1

好的，我修好了。

在 db.ts 中，我简化了问题中所写的内容。我实际上是在获取注释，然后向数组中的每个元素添加另一个键。

.......(previous code in question, db.ts).....    
       comments.forEach(async (comment) => {
          let commenter = {}
          if (comment.commenterType === 'user') {
            commenter = await user.get(comment.commenterId)
          } else if (comment.commenterType === 'designer') {
            commenter = await designer.get(comment.commenterId)
          }
          const formattedComment = {...comment, commenter }
          assortedComments.push(formattedComment)
        })
    
        return assortedComments
    }

我所要做的就是将其更改为 for（评论的评论） 格式，以便它能够正确处理处理并等待异步操作完成，然后再继续并返回各种评论：

for (const comment of comments) {
      let commenter = {}
      if (comment.commenterType === 'user') {
        commenter = await user.get(comment.commenterId)
      } else if (comment.commenterType === 'designer') {
        commenter = await designer.get(comment.commenterId)
      }
      const formattedComment = { ...comment, commenter }
      assortedComments.push(formattedComment)
    }