如何访问从Firestore获取的taskList数组属性？TypeScript报错解决

问题根源在于你把taskList的类型定义成了Array<object>——TypeScript里的object是最宽泛的空对象类型，它不包含任何具体属性，所以你尝试访问task.title时会触发类型检查错误。

解决核心是给task对象定义明确的类型结构，具体步骤如下：

1. 声明Task接口 #

先定义一个接口，描述从Firestore获取的每个task的字段结构，把你用到的属性都列进去：

interface Task {
  id: string;
  title: string;
  // 这里可以补充Firestore文档里的其他字段，比如description、createdAt等
}

2. 修改useState的类型约束 #

把原来的useState<Array<object>>()改成useState<Task[] | undefined>()，让TypeScript明确taskList是Task对象组成的数组：

const [taskList, setTaskList] = useState<Task[] | undefined>();

3. 给Firestore数据加类型断言（可选但推荐） #

在doc.data()处添加类型断言，确保TypeScript识别Firestore返回的数据符合Task结构：

const filteredData = data.docs.map((doc) => ({ ...doc.data() as Task, id: doc.id }));

修改后的完整代码 #

interface Task {
  id: string;
  title: string;
  // 根据你的Firestore文档结构补充其他字段
}

function App() {
  const [taskList, setTaskList] = useState<Task[] | undefined>();

  const taskCollectionRef = collection(db, "tasks");

  useEffect(() => {
    const getTaskList = async () => {
      try {
        const data = await getDocs(taskCollectionRef);
        const filteredData = data.docs.map((doc) => ({ ...doc.data() as Task, id: doc.id }));
        setTaskList(filteredData);
      } catch (err) {
        console.error(err);
      }
    };
    getTaskList();
  }, []);

  return (
    <>
      <TopNavbar title={siteTitle} />
      <div>
        {taskList?.map((task) => (
          <div key={task.id}> {/* 记得添加key属性，避免React渲染警告 */}
            <h1>{task.title}</h1>
          </div>
        ))}
      </div>
      <Auth />
    </>
  );
}

export default App;

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