如何使用 NextJs API、Firebase Firestore、axios 和 TypeScript 从 Firebase 集合中获取数据？

Question

我在 NextJS 13 中使用 api 路由，像这样从 Firebase 获取数据（ api/locations.tsx ）：

import { db } from "../../firebase";
import { collection, getDocs } from "firebase/firestore";
import type { NextApiRequest, NextApiResponse } from "next";

const Locations = async (req: NextApiRequest, res: NextApiResponse) => {
  try {
    const locationsSnapshot = await getDocs(collection(db, "locations"));
    const locationsData = locationsSnapshot.docs.map((doc) => ({
      ...doc.data(),
      id: doc.id,
    }));

    res.status(200).json({ locationsData });
  } catch {
    res.status(400).end();
  }
};

export default Locations;

然后我有一个组件Locations.tsx ，我试图将位置存储在locations state object 中，如下所示：

import { useEffect, useState } from "react";
import Link from "next/link";
import {
  Container,
  Content,
  Main,
  StyledLink,
  Title,
} from "../components/sharedstyles";
import axios from "axios";

export type LocationData = {
  film: string;
  imdbId: string;
  location?: string;
  scene?: string;
  coords: [number, number];
}[];

type GetLocationResponse = { data: { locationsData: LocationData[] } };

export default function About() {
  const [locations, setLocations] = useState([]);

  const getLocations = async () => {
    // Fetch locations data from locations endpoint and return location data
    const res = await axios.get<GetLocationResponse>("/api/locations");

    return res.data.locationsData;
  };

  useEffect(() => {
    setLocations(getLocations());
  }, []);

  return (
    <Container>
      <Main>
        <Title>Locations</Title>
        <Content>
          <ul>
            {locations?.map(({ location }) => (
              <li>{location}</li>
            ))}
          </ul>
        </Content>
        <Link href="/" passHref legacyBehavior>
          <StyledLink>&larr; Home</StyledLink>
        </Link>
      </Main>
    </Container>
  );
}

但我收到错误Property 'locationsData' does not exist on type 'GetLocationResponse'. 即使我尝试将“locationsData”添加到我的类型定义中type GetLocationResponse = { data: { locationsData: LocationData[] } };

谁能告诉我为什么会出现此错误以及如何解决？ 请和谢谢！

Answer 1

您的前端需要一个带有data属性的响应 object：

type GetLocationResponse = { data: { locationsData: LocationData[] } };

但是您的后端正在发送 object 只有一个属性locationsData ：

res.status(200).json({ locationsData });

也许您希望前端的期望通过删除data属性来匹配后端发送的内容：

type GetLocationResponse = { locationsData: LocationData[] };