渲染、GraphQL、Nextjs 和 Reactjs 没有返回任何内容

Question

似乎涵盖了所有条件，并且查询返回了正确的数据。有什么我想念的吗？函数 children 格式不正确吗？

错误：查询（...）：渲染没有返回任何内容。这通常意味着缺少 return 语句。或者，不渲染任何内容，返回 null。

import CATEGORIES_QUERY from "../queries/categories";

import Link from 'next/link'

import Query from "../helpers/query";

export default function Nav() {
    return (
            <div className="flex justify-between container mx-auto bg-gray-700">
                <span className="font-bold text-green-600 hover:text-green-400 border-b-4 border-green-600 hover:border-green-400 hover:translate-y-8 hover:shadow-lg ">
                    Uenunciate
                </span>
                <nav className="flex justify-between">
                    <ul className="flex flex-wrap mx-2 md:mx-4 lg:mx-8">
                        <Query query={CATEGORIES_QUERY} id={null}>
                            {
                                ( { data: { categories } } ) => {
                                    return (categories.map(
                                        (category) => {
                                            return (
                                                <li key={category.slug} className="mx-2 md:mx-4 lg:mx-8 text-green-600 hover:text-green-400 border-b-4 border-green-600 hover:border-green-400 hover:translate-y-8 hover:shadow-lg ">
                                                    <Link href={`/category/${category.slug}`}>
                                                        {category.name}
                                                    </Link>
                                                </li>
                                            );
                                        }
                                    )) || null; 
                                }
                            }
                        </Query>
                    </ul>
                </nav>
            </div>
        
    )
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

import React from "react";
import { useQuery } from "@apollo/react-hooks";

const Query = ({ children, query, slug }) => {
  const { data, loading, error } = useQuery(query, {
    variables: { slug: slug }
  });

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {JSON.stringify(error)}</p>;

  return children({ data });
};

export default Query;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>