React+Firebase组件仅在IDE编辑时渲染问题求助（useEffect相关）

核心问题 #

1. useEffect依赖缺失：你的useEffect依赖数组是空的，但请求逻辑完全依赖courseName这个props。如果首次渲染时courseName还未初始化（比如父组件异步获取后才传递），或者后续courseName发生变化，当前代码不会重新执行数据请求，导致数组一直为空。只有修改代码触发热重载时，courseName已经有值，请求才能正确执行。
2. onSnapshot逻辑冗余且错误：每次触发快照时你都创建了空数组videos，然后判断videos.length === 0——这个条件永远为真，完全没必要。而且你在forEach循环里每次push后都调用setVideos，会导致组件多次不必要的重渲染，应该等所有数据收集完成后一次性更新状态。

修复后的代码 #

const NextVideo = ({courseName}) => {

  const [videos, setVideos] = useState([]);
  const [loading, setLoading] = useState(true); // 新增loading状态优化体验

  useEffect(() => {  
    // courseName为空时不执行请求，避免无效查询
    if (!courseName) return;

    const q = query(collection(db, 'videos'), where('courseID', '==', courseName));
    const unsubscribe = onSnapshot(q, (querySnapshot) => {
      const fetchedVideos = [];
      querySnapshot.forEach((doc) => {
        fetchedVideos.push({...doc.data(), id: doc.id });  
      });
      setVideos(fetchedVideos); // 收集完所有数据后一次性更新状态
      setLoading(false);
    });

    return () => unsubscribe(); // 组件卸载时取消快照监听
  }, [courseName]); // 加入courseName作为依赖，props变化时重新执行

  // 加载状态显示占位符
  if (loading) {
    return <div>加载中...</div>;
  }

  return (
    <>
        <Row className="mt-4">
            <Col xs="12" sm="12" md="12" lg="8">
              <video height="500" controls>
                <source src="https://vimeo.com/347119375" type="video/mp4"/> {/* 修复source标签语法错误，src是正确属性 */}
              </video>
                  <h3 style={{textAlign:"left", color: '#fcc981', fontWeight:"bold"}}>Video Title</h3>
          </Col>
          <Col>
          <Stack className="vBody" gap={3}>
          {videos.length > 0 ? (
            videos.map((video)=>(
                    <div key={video.id} className="py-3 px-2" style={{background: '#0F0C0E'}}> {/* 用唯一id作为key，避免title重复导致的渲染问题 */}
                      <h5 style={{fontWeight:'bold'}}>{video.title}</h5>
                    <ul>
                    <li>Length: {video.videoLength}</li>
                    <li>Now Watching</li>            
                    </ul>
                    </div>
            ))
          ) : (
            <div>暂无视频数据</div> // 空数组时显示友好提示
          )}
          </Stack> 
          </Col>
        </Row>
        <Stack className="vBody">
        <h4>Description:</h4>
          <p> Words </p>
          <h4>Instructor(s): </h4>
          <p> Names</p>
          <Accordion className="mt-4" defaultActiveKey="0">
          <Accordion.Item eventKey="0">
          <Accordion.Header><h4>Transcript</h4></Accordion.Header>
          <Accordion.Body style={{backgroundColor: '#0F0C0E', color: '#ffffff'}}>
            <p></p>
          </Accordion.Body>
          </Accordion.Item>
          </Accordion>
        </Stack> 
     </>     
  );
}

export default NextVideo;

额外优化点 #

• 修复了video标签里source的语法错误：原代码的<source="..."不符合HTML规范，改为<source src="..."。
• 将列表项的key从video.title替换为video.id，title可能重复，key必须是唯一值，避免React渲染警告。
• 新增loading状态和空数组提示，减少用户等待时的困惑。

内容的提问来源于stack exchange，提问作者Vic-E