React+Sanity搭建博客时SinglePost页报Element type invalid错误求助

问题根因 #

你代码中BlockContent组件的导入方式错误，@sanity/block-content-to-react 包对外暴露的是默认导出，你使用命名导入的方式拿到的值为undefined，渲染undefined作为组件就会触发你遇到的报错。

修复方案 #

1. 修改导入语句
   将SinglePost.js中原有导入代码：

import { BlockContent } from "@sanity/block-content-to-react"

替换为：

import BlockContent from "@sanity/block-content-to-react"

2. 可选优化
   你当前的GROQ查询存在注入风险，建议调整为参数传递的写法：

useEffect(() => {
    sanityClient.fetch(`*[slug.current == $slug] {
        title,
        _id,
        slug,
        mainImage{
            asset->{
                _id,
                url
            }
        },
        body,
        "name": author->name,
        "authorImage": author->image
    }`, { slug })
    .then((data) => setSinglePost(data[0]))
    .catch(console.error);
}, [slug]);

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