Javascript 无法读取未定义的属性slug

我正在使用next.js和wordpress。我已经设置了我的api.js。每当我试图从另一个组件访问

[slug]

时，它就会显示-

类型错误：无法读取未定义的
的属性“slug”

假设我有另一个名为
Test
的页面，如果我试图通过下一个链接从组件访问文章

<Link href={`/articles/${node.slug}`}>
    <a><h5>{post.name}</h5></a>
</Link>

[slug].js：


<article>
   <h1>{postData.title}</h1>
       <div dangerouslySetInnerHTML={{ __html: postData.content }} />
</article>

export async function getStaticPaths() {
    const allPosts = await getAllPostsWithSlug();

    return {
        paths: allPosts.edges.map(({ node }) => `/articles/${node.slug}`) || [],
        fallback: true
    };
}

export async function getStaticProps({ params }) {
    const data = await getPost(params.slug);

    return {
        props: {
            postData: data.post
        }
    };
}


注意：由于stackoverflow验证，我缩短了代码。现在，问题是每当我尝试从另一个组件访问路径时，它都会显示我上面提到的错误

我正在使用路由和所有的下一个链接

不管怎么说，要修好它吗？请引导我

谢谢大家。
使用上面的graphql查询

query AllProfiles {
  businessProfiles(where: {orderby: {field: AUTHOR, order: ASC}}) {
    edges {
      node {
        date
        title
        slug
        link
        uri
      }
    }
  }
}

假设您在
链接
中针对slug的查询，您的函数如下所示

export async function getAllProfiles() {
    const data = await fetchAPI(`
query AllProfiles {
  businessProfiles(where: {orderby: {field: AUTHOR, order: ASC}}) {
    edges {
      node {
        date
        title
        slug
        link
        uri
      }
    }
  }
}
`);
  
 return data?.posts;
}

然后，您将要隔离slug。怎么用？制作一个独立的getProfileSlug组件

import { getAllProfiles } from '@lib/api';
import Link from 'next/link';

const resolveProfileSlugs = async ({ ...props }) => {
    const data = await getAllProfiles();
    return data !== null &&
        data.posts !== null &&
        data.posts.edges !== null &&
        data.posts.edges.length > 0 ? (
        data.posts.edges.map(slugs => {
            return slugs !== null &&
                slugs.node !== null &&
                slugs.node.slug !== null &&
                slugs.node.title !== null ? (
                <>
                    <Link href={`/articles/${slugs.node.slug}`} passHref key={slugs.node.id}>
                        <a {...props}>
                            {slugs.node.title}
                        </a>
                    </Link>
                </>
            ) : (
                <div>{'Slug or Title Null'}</div>
            )
        })
    ) : (
        <div>
            {
                'data from getAllProfiles either null, undefined, and/or has an edges.length = 0'
            }
        </div>
    );
};

export default resolveProfileSlugs;

从'@lib/api'导入{getAllProfiles}；
从“下一个/链接”导入链接；
const resolveprofileslaugs=async（{…props}）=>{
常量数据=等待getAllProfiles（）；
返回数据！==null&&
data.posts！==null&&
data.posts.edges！==null&&
data.posts.edges.length是否大于0(
data.posts.edges.map（slug=>{
返回段塞！==null&&
slug.node！==null&&
slug.node.slug！==null&&
slug.node.title！==null(
您的变量
节点
未按预期设置。它返回为
未定义的
。请将其记录在某个地方，然后查看它是如何到达您调用其属性的页面的。我如何修复它，请问一下？您是否打算在
链接
的href中使用
post.slug
而不是
节点.slug
？如果我们看不到使用
链接的组件的完整代码，就很难提供帮助。Post是一个完全不同的组件。我只想通过节点将slug链接调用到Post组件中。slug@AdewalePerfect，您能否发布一段合理的代码，显示
节点
被设置在某个位置？如果出于某种原因，它不能它在这里，做一些类似的事情，并张贴在这里的链接。
export async function getAllProfiles() {
    const data = await fetchAPI(`
query AllProfiles {
  businessProfiles(where: {orderby: {field: AUTHOR, order: ASC}}) {
    edges {
      node {
        date
        title
        slug
        link
        uri
      }
    }
  }
}
`);
  
 return data?.posts;
}

import { getAllProfiles } from '@lib/api';
import Link from 'next/link';

const resolveProfileSlugs = async ({ ...props }) => {
    const data = await getAllProfiles();
    return data !== null &&
        data.posts !== null &&
        data.posts.edges !== null &&
        data.posts.edges.length > 0 ? (
        data.posts.edges.map(slugs => {
            return slugs !== null &&
                slugs.node !== null &&
                slugs.node.slug !== null &&
                slugs.node.title !== null ? (
                <>
                    <Link href={`/articles/${slugs.node.slug}`} passHref key={slugs.node.id}>
                        <a {...props}>
                            {slugs.node.title}
                        </a>
                    </Link>
                </>
            ) : (
                <div>{'Slug or Title Null'}</div>
            )
        })
    ) : (
        <div>
            {
                'data from getAllProfiles either null, undefined, and/or has an edges.length = 0'
            }
        </div>
    );
};

export default resolveProfileSlugs;