React获取Firebase产品嵌套视频数组为空：数据映射切片渲染故障

代码问题排查及修复 #

存在的核心问题 #

• useState 未设置初始值：reviews 初始为undefined，首次渲染调用slice方法会直接抛出类型错误，需要初始化为空数组。
• useEffect 入参使用错误：useEffect 的回调函数不会接收productID作为参数，productID应该从组件的props/state中直接读取，你这里写的参数会覆盖外部的productID变量，导致查询的文档ID为undefined。
• 异步操作后的日志逻辑错误：setReviews是异步更新，你在then外部打印reviews拿到的永远是更新前的旧值，甚至是初始的undefined。
• 渲染时取值错误：从Firestore查询到的每一条doc数据是包含videoURL等字段的对象，你直接把整个对象传递给ReactPlayer的url属性会导致播放器无法识别视频地址。
• 冗余无效代码：const [] = videoUrl 没有任何作用，属于无效代码可直接删除。

修正后的完整代码 #

// 初始化reviews为空数组
const [reviews, setReviews] = useState([]);

useEffect(() => {
  // 直接使用外部定义的productID（来自props或组件state）
  firestore
    .collection("products")
    .doc(productID)
    .collection("productReviewClips")
    .get()
    .then((snapshot) => {
      const reviewList = snapshot.docs.map((doc) => ({
        ...doc.data(),
        documentID: doc.id,
      }));
      setReviews(reviewList);
      // 要打印最新值可直接输出reviewList
      console.log(reviewList);
    });
// 依赖项正确绑定外部的productID
}, [productID]);

// 渲染部分正确取videoURL字段，注意字段名和你实际数据库存储的保持一致
{reviews.slice(0, 3).map((reviewItem, pos) => {
  const configProduct = {
    ...product,
  };
  return (
    <ReactPlayer
      playing={true}
      url={reviewItem.videoURL}
      width="24%"
      height="100%"
      controls
      muted
      loop
      key={pos}
      {...configProduct}
    />
  );
})}

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