为何调用TaskItem组件无响应？Firestore集成问题排查

正在排查子组件TaskItem被父组件调用后无响应的问题，目前正将Cloud Firestore集成到原Redux项目中，核心目标是用Firestore中的数据填充List组件。已确认能成功获取Firestore数据，在List组件的返回语句中打印taskList能看到正确内容，但TaskItem组件始终未执行，也无法渲染。

相关简化组件代码 #

List.js #

import React, { useEffect, useState } from "react";
import db from "../../db";
import { onSnapshot, query, collection, orderBy } from "firebase/firestore";

import TaskItem from "./TaskItem";

const List = () => {
  const [taskList, setTaskList] = useState([]); // 目前假设数据库非空，在初始渲染时填充
  const [isInitialRender, setIsInitialRender] = useState(true);

  // Firestore 引用与查询
  const ref = collection(db, "Tasks");
  const q = query(ref, orderBy("listIndex"));

  useEffect(() => {
      // 仅在初始渲染时执行
      if (isInitialRender) {
        // 填充任务列表
        onSnapshot(q, (querySnapshot) => {
            setTaskList(() => querySnapshot.docs)
        }, (error) => {
          console.log(error)
        })
      };

      setIsInitialRender(() => false);
  }, []);

  return (
    <>
      <h2>List</h2>
        {taskList.forEach((task) => ( // 此处打印`task`能输出正确数据
          <ul key={task.data().key}>
            <TaskItem
              id={task.data().key}
              // docRef={taskDoc}
            />
          </ul>
          ))
        }
    </>
  );
};

export default List;

TaskItem.js #

import React from "react";

const TaskItem = (props) => {
  console.log('This will not print')

  const submitHandler = () => console.log('Submitted');

  return (
    <form onSubmit={submitHandler}>
      <input
        autoFocus
        type="text"
      />
    </form>
  );
};

export default TaskItem;

已尝试的解决方案 #

• 将文档数据存入状态再传参，疑似引发无限循环，且希望直接传递DocumentReference给TaskItem，该方案无效；
• 在状态设置器中返回[...querySnapshot.docs]或(prev) => prev = [...querySnapshot.docs]，TaskItem仍无响应；
• 将taskList状态分解为新数组并传参给TaskItem，问题依旧。

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