在ReactJS中使用Navigator.Clipboard API从Firestore复制到剪贴板

import React, { useEffect, useState } from 'react';
import { getFirestore, doc, getDoc } from 'firebase/firestore';

const CopyToClipboard = ({ documentId }) => {
  const [data, setData] = useState('');
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const db = getFirestore();
        const docRef = doc(db, 'collectionName', documentId);
        const docSnap = await getDoc(docRef);

        if (docSnap.exists()) {
          setData(docSnap.data().content);
        } else {
          setError('Document does not exist');
        }
      } catch (err) {
        setError(err);
      }
    };

    fetchData();
  }, [documentId]);

  const copyToClipboard = async () => {
    try {
      await navigator.clipboard.writeText(data);
      alert('Content copied to clipboard!');
    } catch (err) {
      setError(err);
    }
  };

  return (
    <div>
      {error && <p>{error.message}</p>}
      {data && (
        <div>
          <p>Content: {data}</p>
          <button onClick={copyToClipboard}>Copy to Clipboard</button>
        </div>
      )}
    </div>
  );
};

export default CopyToClipboard;

if (navigator.clipboard) {
  // 使用 Navigator.Clipboard API
} else {
  // 提供降级方案，例如使用 document.execCommand('copy')
}