diff --git a/build/document-extractor.js b/build/document-extractor.js
index 761024b6f2d7..cadf0d11a290 100644
--- a/build/document-extractor.js
+++ b/build/document-extractor.js
@@ -287,28 +287,44 @@ function _addSingleSpecialSection($) {
   }
   const query = dataQuery.replace(/^bcd:/, "");
   const { browsers, data } = packageBCD(query);
-  if (data === undefined) {
-    return [
-      {
-        type: specialSectionType,
-        value: {
-          title,
-          id,
-          isH3,
-          data: null,
-          query,
-          browsers: null,
-        },
-      },
-    ];
-  }
 
   if (specialSectionType === "browser_compatibility") {
+    if (data === undefined) {
+      return [
+        {
+          type: specialSectionType,
+          value: {
+            title,
+            id,
+            isH3,
+            data: null,
+            query,
+            browsers: null,
+          },
+        },
+      ];
+    }
     return _buildSpecialBCDSection();
   } else if (specialSectionType === "specifications") {
+    if (data === undefined) {
+      return [
+        {
+          type: specialSectionType,
+          value: {
+            title,
+            id,
+            isH3,
+            query,
+            specifications: [],
+          },
+        },
+      ];
+    }
     return _buildSpecialSpecSection();
   }
 
+  throw new Error(`Unrecognized special section type '${specialSectionType}'`);
+
   function _buildSpecialBCDSection() {
     // First extract a map of all release data, keyed by (normalized) browser
     // name and the versions.
@@ -400,17 +416,26 @@ function _addSingleSpecialSection($) {
 
     // Use BCD specURLs to look up more specification data
     // from the browser-specs package
-    let specifications = [];
+    const specifications = specURLs
+      .map((specURL) => {
+        const spec = specs.find(
+          (spec) =>
+            specURL.startsWith(spec.url) || specURL.startsWith(spec.nightly.url)
+        );
+        if (spec) {
+          // We only want to return exactly the keys that we will use in the
+          // client code that renders this in React.
+          return {
+            bcdSpecificationURL: specURL,
+            title: spec.title,
+            shortTitle: spec.shortTitle,
+          };
+        }
+      })
+      .filter(Boolean);
 
-    specURLs.forEach((url) => {
-      let spec = specs.find(
-        (spec) => url.startsWith(spec.url) || url.startsWith(spec.nightly.url)
-      );
-      if (spec) {
-        spec.bcdSpecificationURL = url;
-        specifications.push(spec);
-      }
-    });
+    console.log("HERE!!");
+    console.log(specifications);
 
     return [
       {
diff --git a/client/src/document/spec-table.tsx b/client/src/document/spec-table.tsx
index 201c423c71b0..cc2e8450d7f5 100644
--- a/client/src/document/spec-table.tsx
+++ b/client/src/document/spec-table.tsx
@@ -17,45 +17,46 @@ export function SpecificationTable({
   }>;
   query: string;
 }) {
-  if (specifications) {
-    const rows = specifications.map((spec) => (
-      <tr key={spec.bcdSpecificationURL}>
-        <td>
-          <a href={spec.bcdSpecificationURL}>{spec.title}</a>
-        </td>
-      </tr>
-    ));
+  return (
+    <>
+      {title && !isH3 && <DisplayH2 id={id} title={title} />}
+      {title && isH3 && <DisplayH3 id={id} title={title} />}
 
-    return (
-      <>
-        {title && !isH3 && <DisplayH2 id={id} title={title} />}
-        {title && isH3 && <DisplayH3 id={id} title={title} />}
+      {/* XXX We could have a third condition; the specURL worked but yielded
+      exactly 0 specifications. If that's the case, perhaps the messaging
+      should be different. */}
+      {specifications.length > 0 ? (
         <table className="standard-table">
           <thead>
             <tr>
               <th scope="col">Specification</th>
             </tr>
           </thead>
-          {rows}
+          <tbody>
+            {specifications.map((spec) => (
+              <tr key={spec.bcdSpecificationURL}>
+                <td>
+                  <a href={spec.bcdSpecificationURL}>{spec.title}</a>
+                </td>
+              </tr>
+            ))}
+          </tbody>
         </table>
-      </>
-    );
-  } else {
-    return (
-      <>
-        {title && !isH3 && <DisplayH2 id={id} title={title} />}
-        {title && isH3 && <DisplayH3 id={id} title={title} />}
-        <p>
-          No specification data found for <code>{query}</code>.<br />
-          <a href="#on-github">Check for problems with this page</a> or
-          contribute a missing <code>spec_url</code> to{" "}
-          <a href="https://github.com/mdn/browser-compat-data">
-            mdn/browser-compat-data
-          </a>
-          . Also make sure the specification is included in{" "}
-          <a href="https://github.com/w3c/browser-specs">w3c/browser-specs</a>.
-        </p>
-      </>
-    );
-  }
+      ) : (
+        <div className="notecard warning">
+          <p>
+            No specification data found for <code>{query}</code>.<br />
+            <a href="#on-github">Check for problems with this page</a> or
+            contribute a missing <code>spec_url</code> to{" "}
+            <a href="https://github.com/mdn/browser-compat-data">
+              mdn/browser-compat-data
+            </a>
+            . Also make sure the specification is included in{" "}
+            <a href="https://github.com/w3c/browser-specs">w3c/browser-specs</a>
+            .
+          </p>
+        </div>
+      )}
+    </>
+  );
 }