Next.js useEffect内forEach未执行 allposts返回空数组问题

• onSnapshot是Firestore提供的异步实时监听方法，你当前代码里posts.forEach的执行时机早于数据返回的时机：forEach运行时posts还是初始化的空数组，自然不会触发循环内的打印、元素推入逻辑。
• 你用普通局部变量allposts存储待渲染内容，就算后续异步拿到了数据修改了这个变量，也不会触发React组件重渲染，页面始终只能拿到初始的空数组。
• 你通过模板字符串拼接HTML内容塞给JSX的写法本身不符合React渲染规则：React默认会把字符串按纯文本转义渲染，不会解析成真实DOM，而且字符串内写的ArrowRightIcon是React组件，根本不会被识别执行。

import { getFirestore, collection, query, orderBy, onSnapshot } from "firebase/firestore";
import { useState, useEffect } from "react";
// 替换为你项目中ArrowRightIcon的实际引入路径
import { ArrowRightIcon } from "@heroicons/react/24/outline";

export default function Portfolio() {
  const db = getFirestore();
  const colRef = collection(db, 'posts');
  // 用状态存帖子列表，初始值为空数组
  const [currentPosts, setCurrentPosts] = useState([])

  useEffect(() => {
    const q = query(colRef, orderBy('created_at'))
    // 注册实时监听
    const unsub = onSnapshot(q, (snapshot) => {
      const posts = []
      snapshot.docs.forEach((doc) => {
        posts.push({ ...doc.data(), id: doc.id })
      })
      // 拿到完整数据后更新状态，触发组件重渲染
      setCurrentPosts(posts)
    });

    // 组件卸载时取消监听，避免内存泄漏
    return () => unsub()
  }, [])

  return (
    <>
      <div className="text-center text-[30px] text-white border-b-2 border-red-500 mt-10 mb-10">
        Portfolio
      </div>
      <div>
        {/* 直接遍历状态生成React元素 */}
        {currentPosts.map((post) => (
          <div 
            key={post.id}
            className='pop-out h-[250px] w-[300px] md:h-[250px] md:w-[400px] lg:h-[250px] lg:w-[400px] border-2 cursor-pointer rounded-md m-auto md:m-auto lg:m-0'
          >
            <h2 className='text-[30px] ml-5 mt-10 text-[gray]'>{post.title} by {post.author}</h2>
            <ArrowRightIcon className='relative w-9 left-[250px]  top-[120px] md:left-[350px] md:top-[120px] lg:left-[350px] lg:top-[120px] text-orange-500'/>
          </div>
        ))}
      </div>
    </>
  );
}

• 移除了无意义的allposts、posts临时普通变量，所有帖子数据统一存在currentPosts状态中，数据更新自动触发页面重渲染
• 把数据处理逻辑全部移到onSnapshot的回调内部，保证拿到全量快照数据后再更新状态
• 放弃字符串拼接HTML的写法，直接在JSX中通过map遍历状态生成合法的React节点，给每个列表项加了唯一key属性提升渲染性能
• 补充了组件卸载时的快照监听解绑逻辑，避免内存泄漏

内容的提问来源于stack exchange，提问作者Jaydendev