I'm currently utilizing api routes within NextJS 13 to retrieve data from Firebase. The code for this can be found in 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;
Next, I have a component called Locations.tsx. In this component, I am attempting to save the locations retrieved into the locations state object like so:
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>← Home</StyledLink>
</Link>
</Main>
</Container>
);
}
However, an error is occurring stating
Property 'locationsData' does not exist on type 'GetLocationResponse'.type GetLocationResponse = { data: { locationsData: LocationData[] } };If anyone could provide insight as to why this error is happening and how it can be resolved, I would greatly appreciate it. Thank you!