使用Gatsby的useStaticQuery获取数据返回undefined问题排查

核心问题是你对useStaticQuery的返回值解构错误了。

useStaticQuery执行后，返回的直接就是GraphQL查询结果里的data对象（也就是你在playground里看到的{allFile: ...}这部分），而不是嵌套了一层data的结构。你代码里写的const { data } = useStaticQuery(...)，相当于从返回值里去读取data属性，但返回值本身没有这个属性，所以拿到的data自然是undefined。

修正后的代码示例 #

直接接收整个返回值作为data：

import React from "react";
import { useStaticQuery, graphql} from "gatsby";

export default function MenuMD () {
    // 直接赋值，不再解构data
    const data = useStaticQuery(
    graphql`
      query {
                allFile(filter: {sourceInstanceName: {eq: "markdown"}}) {
                    edges {
                        node {
                            childrenMarkdownRemark {
                                frontmatter {
                                    slug
                                    title
                                }
                            }
                        }
                    }
                }
      }
    `
    )
    console.log('static data', data); // 现在就能拿到正确的allFile数据了

    return<>Menu from MarkDown</>
}

或者也可以直接解构出allFile，更简洁：

const { allFile } = useStaticQuery(graphql`...`)
console.log('static data', allFile);

额外验证点 #

如果修正后还是有问题，可以检查：

• 确保你的Markdown文件确实被Gatsby正确识别，sourceInstanceName配置的markdown和gatsby-config.js里的设置一致
• 重启Gatsby开发服务器，有时候缓存会导致查询不更新

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