当我在过去遇到类似的问题时，我为组件生成了一个uuid，这样你的代码就像这样：

import React from "react";
// This is the library I'd use, but feel free to make up the ID however you want
import { uuid } from 'uuidv4';

type AccordionProps = {
  children: ReactNode;
  label: string;
};

export const Accordion = ({ label, children }: AccordionProps) => {
  const { isContentShowing, setIsContentShowing } = useAccordion();
  // Note that the ID will be regenerated on every re-render, but will still stay internally consistent
  const id = uuid();

  return (
    <div className="accordion" aria-label={`${label} Accordion`} data-testid="accordion">
      <button
        className="accordion__button"
        onClick={setIsContentShowing}
        aria-expanded={isContentShowing}
        aria-controls={id}
      >
        <span className="accordion__text">{label}</span>
        <AccordionArrowIcon isContentShowing={isContentShowing} />
      </button>
      {isContentShowing && (
        <div className="accordion__content" id={id} aria-hidden={!isContentShowing}>
          {children}
        </div>
      )}
    </div>
  );

而且，aria-hidden没有做任何事情，逻辑上没有为真的点，因为当内容没有显示时，元素不存在。