尝试构建我的项目时,控制台中出现此错误:
.next/types/app/facebook/page.ts:8:13
Type error: Type 'OmitWithTag<typeof import("D:/projects/abkh24/client/app/facebook/page"), "metadata" | "default" | "config" | "generateStaticParams" | "revalidate" | "dynamic" | "dynamicParams" | "fetchCache" | "preferredRegion" | "runtime" | "maxDuration" | "generateMetadata", "">' does not satisfy the constraint '{ [x: string]: never; }'.
Property 'fetchUser' is incompatible with index signature.
Type '(id: string, token: string) => Promise<UserData | null>' is not assignable to type 'never'.
6 |
7 | // Check that the entry is a valid entry
> 8 | checkFields<Diff<{
| ^
9 | default: Function
10 | config?: {}
11 | generateStaticParams?: Function
error Command failed with exit code 1.
这是具有
fetchUser
功能的组件,向 Facebook Graph API
发出请求以获取某些用户的头像和其他工作人员。我尝试输入它,但出现错误。该组件的代码如下:
"use client";
import { Box } from "@mui/material";
import React, { useState, useEffect, Fragment } from "react";
import Spinner from "@/components/Spinner";
import { useIsMount } from "@/misc/tools";
import { useAppDispatch, useAppSelector } from "@/store/hooks";
import { setAuth } from "@/store/authSlice";
import { RootState } from "@/store";
import { redirect } from "next/navigation";
const ACCESS_TOKEN = process.env.NEXT_PUBLIC_ACCESS_TOKEN;
type UserData = {
avatar: string;
category: string;
name: string;
};
function stringBetweenStrings(
startStr: string,
endStr: string,
str: string,
): string {
const pos = str.indexOf(startStr) + startStr.length;
return str.substring(pos, str.indexOf(endStr, pos));
}
export const fetchUser = async (
id: string,
token: string,
): Promise<UserData | null> => {
try {
const response = await fetch(
`https://graph.facebook.com/${id}?fields=name,picture&access_token=${token}`,
);
const data = await response.json();
return {
avatar: data.picture.data.url,
category: "facebook",
name: data.name,
};
} catch (error) {
console.error("Error fetching user data", error);
return null;
}
};
export default function page() {
const { name, avatar, category } = useAppSelector(
(state: RootState) => state.auth,
);
const dispatch = useAppDispatch();
const isMount = useIsMount();
const [facebookId, setFacebookId] = useState<string>('');
useEffect(() => {
const myUrl = window.location.href;
setFacebookId(stringBetweenStrings("id=", "#_=_", myUrl));
}, []);
useEffect(() => {
(async () => {
if (!isMount && ACCESS_TOKEN) {
const data: UserData | null = await fetchUser(facebookId, ACCESS_TOKEN);
dispatch(setAuth({ ...data, id: facebookId }));
}
})();
}, [facebookId]);
useEffect(() => {
if (!isMount && category) {
redirect("/");
}
}, [category]);
return (
<Fragment>
<Box
sx={{
position: "fixed",
zIndex: 111,
top: 0,
left: 0,
height: "100vh",
width: "100%",
display: "flex",
justifyContent: "center",
alignItems: "center",
background: "#fff",
}}
></Box>
<Spinner />
</Fragment>
);
}
该项目基于
Next.js 13
,使用Eslint
等工具。谢谢关注。